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

【问题标题】：VueJS - access updated child component's data from parentVueJS - 从父组件访问更新的子组件数据
【发布时间】：2018-07-20 23:50:19
【问题描述】：

我正在使用带有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,
      };
    }
};

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

（我引入了那些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 时，我没有更新这些值。

我该怎么做？

谢谢

【问题讨论】：

vuejs update parent data from child component的可能重复

标签： javascript vue.js onsen-ui

【解决方案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 是第二个选项的示例。

【讨论】：