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

Posted 2023-02-23

【中文标题】如何在父组件中使用来自 Vue.js 子组件的数据？

【英文标题】：How do I use data from Vue.js child component within parent component?

【发布时间】：2017-05-28 01:47:57

【问题描述】：

我有一个使用子组件的表单组件。我想在父组件中使用来自子组件的数据。

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

我想将 placeInput.place 和 name 数据从 Candidate-form 组件发送到服务器，很可能使用 vue-resource。

【参考方案1】：

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

最终解决方案：

刀片模板：

@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 的This article 也帮助我简化了事情。我想多了！

为 vue-google-maps 组件向 @GuillaumeLeclerc 致敬：https://github.com/GuillaumeLeclerc/vue-google-maps

【讨论】：

我发现向自定义组件添加 v-model 支持是一个更好的解决方案。你会在这里找到一篇很有帮助的文章：alligator.io/vuejs/add-v-model-support

【参考方案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
  
)

【讨论】：

谢谢。看起来我需要为此创建一个商店

【参考方案3】：

在这里查看我的回答 VueJS access child component's data from parent ，几乎相同的问题。

如果你正在处理大型应用程序，最好的选择是使用 Vuex，它会为你省去很多麻烦。

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