我有一个表单组件,我在其中使用子组件。我想使用父组件中子组件的数据。
我的 html 组件:
<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
然后这是 Vue 实例:
CandidatesForm.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 map 预输入功能,如下所示:
LocationInput.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>
我想将 name
值和信息从 placeInput.place
提交到服务器。
我在主应用程序文件中注册这两个组件,如下所示:
Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
const app = new Vue({
el: 'body'
});
如何将 placeInput.place
数据从位置输入组件传递到候选人表单组件?
我想将 placeInput.place 和名称数据从候选人表单组件发送到服务器,很可能使用 vue-resource。
最佳答案
嘿,不需要商店或 Vuex。使用 Prop 传递数据!
最终解决方案:
Blade 模板:
@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'
});
This article alligator.io 也帮助我简化了事情。是我想太多了!
向 @GuillaumeLeclerc 致敬 vue-google-maps 组件:https://github.com/GuillaumeLeclerc/vue-google-maps
关于javascript - 如何在父组件中使用 Vue.js 子组件中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41621896/