如何访问父组件vueJs中的子组件数据？

Question

我有Vue应用程序，我加载不同的子组件的基础上从父组件中选择的值。当我点击父组件中的提交按钮时，我想把子组件的所有值都输入父组件。

<template>
<div>

<v-select v-model="category"/>


<firstComponent v-show="category == 1">
<secondComponent v-show="category == 2">

<v-btn @click="submitData">Submit</v-btn>
</div></template>

请忽略语法。我想将子组件的所有输入字段数据输入到父组件的submitData方法中。

Answer 1

VueJS的概念可以通过VueJS组件id访问子组件，但这很麻烦。建议使用1。事件总线https://alligator.io/vuejs/global-event-bus/（尽量避免使用此选项，因为当前端代码有数百个文件时，很难跟踪事件需要侦听和调用的位置）2。Vuex更适合VueJS web开发用途

Answer 2

您可以为此使用作用域插槽，类似于内部firstComponent：

<slot :data="sharedData">
// you could display stuff here but not mandatory
</slot>
// in parent
<firstComponent>
 <template v-slot="{sharedData}">
....

现在您可以访问共享数据，您可以将其提供给submit函数。

Answer 3

<template>
   <child ref="children">
</template>


this.$refs.children.anything

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements