Javascript 如何在父组件中使用Vue.js子组件中的数据？

我有一个表单组件，其中我使用一个子组件。我想使用父组件中的子组件中的数据

我的html组件：

<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>

如何将

placeInput.place

数据从位置输入组件传递到候选表单组件

---

我想使用vue资源将placeInput.place和name数据从候选表单组件发送到服务器。

我建议使用VueJS文档中的数据存储方法：

实际上，您将拥有一个

store.js

文件，用于为应用程序导出数据对象。此数据对象与所有组件共享

从上面链接的页面：

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

如果您需要组件具有私有状态和共享状态：

@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

看看我的答案，都是同样的问题

如果您使用的是大型应用程序，最好的选择是使用Vuex，这样可以避免很多麻烦

---

否则，如果它不是bug应用程序，那么您可以使用我的方法，或者使用事件总线。

嘿，不需要商店或Vuex。使用道具传递数据

最终解决方案：

刀片模板：

<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>

@extends（'layouts.app'））
@节（“内容”）
添加新候选人

@停止

父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>

姓名：
{{buttonext}}
{{locationData | json}}
导出默认值{
数据（）{
返回{
位置数据：{
地点：{
名称：“”
},
类型：[]，
限制：{'country'：'usa'}
}
}
},
道具：['endpoint'，'buttonext']
}

子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>

从“vue google maps”导入{PlaceInput，Map}
导出默认值{
道具：['location']，
组成部分：{
位置输入
}
}
标签{显示：块；}

aaaa和整个app.js文件（这在Laravel 5.3 app btw中）

从“vue谷歌地图”导入{load}
装载({
凯：“来自alligator.io也帮助我简化了事情。我想得太多了

向@GuillaumeLeclerc呼喊vue google maps组件：
谢谢。看来我需要实现一个商店来实现这一点。我发现向自定义组件添加v-model支持是一个更好的解决方案。您可以在这里找到一篇非常有用的文章：
@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

<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>

<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>

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'
});