Javascript VueJS-访问更新的子组件'；从父级删除数据

我正在使用

vue cordova webpack

（）模板项目和

Onsen UI

框架

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

<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,
      };
    }
};

导出默认值{
道具：['value1'，'value2']，
姓名：'儿童'，
数据（）{
返回{
可变值1:this.value1，
可变值2:this.value2，
};
}
};

现在，如您所见，

mutableValue1

和

mutableValue2

变量在用户更改

和

组件的值时更新

（我引入了

mutableValue1

和

mutableValue2

变量，以避免

[Vue warn]：避免直接变异道具，因为每当父组件重新呈现时，该值将被覆盖…

警告）

我需要父视图中的值。 目前，在父视图中访问

this.value1

和

this.value2

时，我没有更新这些值

我该怎么做

---

谢谢

您在这里有几个选择。首先，您可以使用引用访问所有子道具：

// 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
导出默认值（）{
名称：“父组件”，
方法：{
getChildProps（）{
console.log（this.$refs['my-child'].mutableValue1）；//输出mutableValue
},
},
};

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

// 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>

//parent-component.vue
导出默认值（）{
名称：“父组件”，
方法：{
剂量计（有效载荷）{
console.log（有效负载）；//输出可变值
},
},
};
//child-component.vue
导出默认值{
道具：['value1'，'value2']，
姓名：'儿童'，
数据（）{
返回{
可变值1:this.value1，
};
};
观察：{
可变值1（val）{
这是$emit（'change'，mutableValue1）；
},
},
};

---

是第二个选项的示例。

这里有几个选项。首先，您可以使用引用访问所有子道具：

// 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
导出默认值（）{
名称：“父组件”，
方法：{
getChildProps（）{
console.log（this.$refs['my-child'].mutableValue1）；//输出mutableValue
},
},
};

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

// 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>

//parent-component.vue
导出默认值（）{
名称：“父组件”，
方法：{
剂量计（有效载荷）{
console.log（有效负载）；//输出可变值
},
},
};
//child-component.vue
导出默认值{
道具：['value1'，'value2']，
姓名：'儿童'，
数据（）{
返回{
可变值1:this.value1，
};
};
观察：{
可变值1（val）{
这是$emit（'change'，mutableValue1）；
},
},
};

是第二个选项的示例。