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

您可以为此使用范围内的插槽，例如firstComponent内的内容：

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

现在您可以访问共享数据，可以将其提供给提交功能。

Answer 2

VueJS的概念可以通过VUEJ的组件ID访问子组件，但是很麻烦。建议是用途 1. EventBus https://alligator.io/vuejs/global-event-bus/（尝试避免使用它，因为当您的前端代码包含数百个文件时，很难跟踪事件需要监听和调用的位置） 2. Vuex更适合VueJS Web开发用途

Answer 3

在Vue中可以使用多种方式共享数据。您可以使用serverbus，vuex，或者在子代与父子关系的情况下，只需将数据从子代发送到事件即可。

对于您的特定情况，建议您在父组件中有一个对象/数组，该对象/数组将作为道具传递给所有子组件，然后将表单值绑定到对象中的键。由于数组/对象是通过引用传递的，因此更改的值将直接在父组件中可用。但是，如果您对Vuex感到满意，则选择相同的版本。

此外，我觉得您应该在类别更改时使用动态组件来呈现组件，否则当组件增加时，您的代码中会出现许多v-show或v-if。（https://vuejs.org/v2/guide/components-dynamic-async.html）

Answer 4

<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

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

4 个答案: