![](/img/trans.png)
[英]How can I use data in the child component that are updated in parent component using Vue.js?
[英]How do I use data from Vue.js child component within parent component?
我有一个使用子组件的表单组件。 我想使用父组件中子组件的数据。
我在 html 中的组件:
<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
然后这里是 Vue 实例:
候选人Form.vue
<template>
<div class='row'>
<div class='form-group'>
<label>Name:</label>
<input type='text' class='form-control' v-model='name'>
</div>
<div class='form-group'>
<location-input></location-input>
</div>
<button class='btn btn-primary'>{{buttontext}}</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: ['endpoint', 'buttontext'],
ready() {}
}
</script>
我在那里使用了 locationInput 组件,它很好地呈现在屏幕上。 该组件为输入字段实现了 Google Maps 预输入功能,如下所示:
位置输入.vue
<template>
<place-input
:place.sync="placeInput.place"
:types.sync="placeInput.types"
:component-restrictions.sync="placeInput.restrictions"
class='form-control'
label='Location: '
name='location'
></place-input>
<pre>{{ placeInput.place | json }}</pre>
</template>
<script>
import { PlaceInput, Map } from 'vue-google-maps'
export default {
data() {
return {
placeInput: {
place: {
name: ''
},
types: [],
restrictions: {'country': 'usa'}
}
}
},
props: ['location'],
components: {
PlaceInput
},
ready() {
}
}
</script>
<style>
label { display: block; }
</style>
我想将placeInput.place
中的name
值和信息提交到服务器。
我在我的主应用程序文件中注册这两个组件,如下所示:
Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
const app = new Vue({
el: 'body'
});
如何将placeInput.place
数据从位置输入组件传递到候选表单组件?
我想将 placeInput.place 和 name 数据从候选表单组件发送到服务器,很可能使用 vue-resource。
嘿,不需要商店或 Vuex。 使用道具传递数据!
最终解决方案:
刀片模板:
@extends('layouts.app')
@section('content')
<div class='col-md-6 col-md-offset-3'>
<h1>Add New Candidate</h1>
<hr>
<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
</div>
@stop
父 Vue 组件:
<template>
<div>
<div class='form-group'>
<label>Name:</label>
<input type='text' class='form-control' v-model='name'>
</div>
<div class='form-group'>
<location-input :location="locationData"></location-input>
</div>
<button class='btn btn-primary'>{{buttontext}}</button>
<pre>{{ locationData | json }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
locationData: {
place: {
name: ''
},
types: [],
restrictions: {'country': 'usa'}
}
}
},
props: ['endpoint', 'buttontext']
}
</script>
子 Vue 组件:
<template>
<place-input
:place.sync="location.place"
:types.sync="location.types"
:component-restrictions.sync="location.restrictions"
class='form-control'
label='Location: '
name='location'
></place-input>
</template>
<script>
import { PlaceInput, Map } from 'vue-google-maps'
export default {
props: ['location'],
components: {
PlaceInput
}
}
</script>
<style>
label { display: block; }
</style>
Aaaa 和整个 app.js 文件(顺便说一句,这是在 Laravel 5.3 应用程序中)
import { load } from 'vue-google-maps'
load({
key: '<API_KEY>',
v: '3.24', // Google Maps API version
libraries: 'places', // for places input
});
Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
Vue.component('company-list', require('./components/CompanyList.vue'));
const app = new Vue({
el: 'body'
});
alligator.io 的这篇文章也帮助我简化了事情。 我想多了!
向 @GuillaumeLeclerc 大喊 vue-google-maps 组件: https ://github.com/GuillaumeLeclerc/vue-google-maps
我会推荐这里的 VueJS 文档中的数据存储方法: https ://v2.vuejs.org/v2/guide/state-management.html
本质上,您将拥有一个store.js
文件,该文件为您的应用程序导出数据对象。 此数据对象与您的所有组件共享。
从上面链接的页面:
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
如果您需要组件具有私有状态和共享状态:
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
在这里查看我的答案VueJS access child component's data from parent ,同样的问题。
如果您正在使用大型应用程序,最好的选择是使用 Vuex,它可以为您省去很多麻烦。
否则,如果它不是错误应用程序,那么您可以采用我的方法,或使用事件总线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.