Question

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

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 Maps预先输入功能，如下所示：

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数据从位置输入组件传递给候选人表单组件？

我想将candidateInput.place和来自candidate-form组件的名称数据发送到服务器，很可能是使用vue-resource。

Answer 1

嘿，不需要商店或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>

Child 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应用程序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'
});

来自alligator.io的

This article也帮助我简化了一些事情。我是在思考它！

向@GuillaumeLeclerc大声了解vue-google-maps组件：https://github.com/GuillaumeLeclerc/vue-google-maps

Answer 2

我建议使用VueJS文档中的数据存储方法：https://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
  }
})

Answer 3

在这里查看我的答案VueJS access child component's data from parent，同样的问题。

如果您正在使用大规模应用程序，最好的选择是使用Vuex，它可以避免很多麻烦。

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

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

3 个答案: