VueJS - 从父访问更新的子组件的数据

Question

我正在使用带有 Onsen UI 框架的 vue-cordova-webpack (https://github.com/OnsenUI/vue-cordova-webpack) 模板项目。

我有一个从父组件调用的子组件，如下所示：

<template>
   <!-- ... -->
   <child :value1="value1" 
          :value2="value2">
   </child>
   <!-- ... -->
</template>

在我的子组件中：

<template>
   <!-- ... -->
   <v-ons-search-input v-model="mutableValue1"> </v-ons-search-input>

   <v-ons-checkbox v-model="mutableValue2"> </v-ons-checkbox>
   <!-- ... -->
</template>

export default {
    props: ['value1', 'value2'],

    name: 'child',
    data() {
      return {
        mutableValue1: this.value1,
        mutableValue2: this.value2,
      };
    }
};

现在，如您所见，当用户更改 <v-ons-search-input> 和 <v-ons-checkbox> 组件的值时，mutableValue1 和 mutableValue2 变量会更新。

（我引入了那些mutableValue1和mutableValue2变量以避免[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders...警告）

我需要父视图中的值。目前，在父视图中访问 this.value1 和 this.value2 时，我没有更新这些值。

我该怎么做？

谢谢

Answer 1

这里有多种选择。首先，您可以使用参考访问所有子道具：

// parent-component.vue
<template>
    <child :value1="value1" 
           :value2="value2"
           ref="my-child">
    </child>
</template>

<script>
export default () {
     name: 'parent component',
     methods: {
         getChildProps() {
             console.log(this.$refs['my-child'].mutableValue1); // outputs mutableValue
         },
     },
};
<script>

第二个选项是在发生更改时从子组件发出事件。然后在父组件监听：

// parent-component.vue
<template>
    <child :value1="value1" 
           :value2="value2"
           @change=doSomething>
    </child>
</template>

<script>
export default () {
     name: 'parent component',
     methods: {
         doSomething(payload) {
             console.log(payload); // outputs mutableValue
         },
     },
};
<script>

// child-component.vue

<template>
    <v-ons-search-input v-model="mutableValue1"></v-ons-search-input>
</template>

<script>
export default {
    props: ['value1', 'value2'],
    name: 'child',
    data() {
        return {
            mutableValue1: this.value1,
        };
    };
    watch: {
        mutableValue1(val) {
            this.$emit('change', mutableValue1);
        },
    },
};
</script>

Here是第二个选项的例子。

VueJS - 从父访问更新的子组件的数据

VueJS - access updated child component's data from parent

javascript

onsen-ui

vue.js