![locationInput]( "locationInput")
本文介绍了如何在父组件中使用来自 Vue.js 子组件的数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表单组件，我在其中使用了一个子组件.我想在父组件中使用来自子组件的数据.
我的 html 组件:
</candidates-form>
然后这里是Vue实例:
CandidatesForm.vue
<标签>名称:</label>
<位置输入></位置输入>
<button class='btn btn-primary'>{{buttontext}}</button>
</模板><脚本>导出默认{数据() {返回 {}},道具:['端点'，'buttontext']，准备好() {}}
我在那里使用 locationInput 组件，它可以很好地呈现到屏幕上.该组件为输入字段实现了 Google Maps 预先输入功能，如下所示:
LocationInput.vue
<地方输入:place.sync="placeInput.place":types.sync="placeInput.types":component-restrictions.sync="placeInput.restrictions"类='形式控制'标签='位置:'名称='位置'></place-input><pre>{{ placeInput.place |json }}</pre></模板><脚本>从vue-google-maps"导入 { PlaceInput, Map }导出默认{数据() {返回 {地方输入:{地方: {姓名: ''},类型:[],限制:{'国家':'美国'}}}},道具:['位置']，成分: {位置输入},准备好() {}}<风格>标签{显示:块；}</风格>
我想将 name 值和信息从 placeInput.place 提交到服务器.
我在主应用程序文件中注册了两个组件，如下所示:
Vue.component('locationInput', require('./components/LocationInput.vue'));Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));const app = new Vue({el:'身体'});
如何将 placeInput.place 数据从位置输入组件传递到候选表单组件?
我想将 placeInput.place 和 name 数据从候选表单组件发送到服务器，很可能使用 vue-resource.
解决方案
嘿，不需要商店或 Vuex.使用 props 传递数据！
最终解决方案:
刀片模板:
@extends('layouts.app')@section('内容')<div class='col-md-6 col-md-offset-3'><h1>添加新的候选</h1><小时><candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
@停止
父 Vue 组件:
<div><标签>名称:</label>
<location-input :location="locationData"></location-input>
<button class='btn btn-primary'>{{buttontext}}</button><pre>{{ locationData |json }}</pre>
</模板><脚本>导出默认{数据() {返回 {位置数据:{地方: {姓名: ''},类型:[],限制:{'国家':'美国'}}}},道具:['端点'，'buttontext']}
子Vue组件:
<地方输入:place.sync="location.place":types.sync="location.types":component-restrictions.sync="location.restrictions"类='形式控制'标签='位置:'名称='位置'></place-input></模板><脚本>从vue-google-maps"导入 { PlaceInput, Map }导出默认{道具:['位置']，成分: {位置输入}}<风格>标签{显示:块；}</风格>
Aaaa 和整个 app.js 文件(顺便说一下，这是在 Laravel 5.3 应用程序中)
import { load } from 'vue-google-maps'加载({key: '',v: '3.24',//谷歌地图 API 版本图书馆:'地方'，//用于地方输入});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:'身体'});
这篇文章来自 alligator.io 也帮助我简化了事情还.我多虑了！
为 vue-google-maps 组件向 @GuillaumeLeclerc 大喊:https://github.com/GuillaumeLeclerc/vue-google-maps
I have a form component where I use a child component. I want to use data from the child component within the parent.
My component in html:
<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
Then here is the Vue instance:
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>
I utilize the locationInput component in there and it renders to the screen nicely. That component implements Google Maps typeahead functionality for the input field and looks like this:
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>
I want to submit the name value and information from placeInput.place to the server.
I register both components in my main app file like so:
Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
const app = new Vue({
el: 'body'
});
How do I pass the placeInput.place data from location-input component to candidates-form component?
I want to send the placeInput.place and name data from the candidates-form component to the server, most likely using vue-resource.
解决方案
Hey no need for a store or Vuex. Pass data using props!
Final solution:
Blade template:
@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
Parent Vue component:
<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>
Child Vue component:
<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>
Aaaaand the overall app.js file (this is within a Laravel 5.3 app btw)
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 from alligator.io also helped simplify things for me also. I was overthinking it!
Shout out to @GuillaumeLeclerc for the vue-google-maps component: https://github.com/GuillaumeLeclerc/vue-google-maps
这篇关于如何在父组件中使用来自 Vue.js 子组件的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！