vue js prop 等于 v-model

Question

当我在挂载钩子中将 v-model 设置为等于 props 时，为什么更改也会影响 props。

export default{
  props: {
    initial_value: Array,
  },

  data(){
     return { component_value: [] }
  },

   mounted(){
     this.component_value = this.initial_value;
   }
}

因此，当我对 component_value 进行一些更改时，它也会影响 initial_value。

我想在这里写下我的全部代码，但只是尽量缩短。

Answer 1

export default{
  props: ['initial_value'],

  data(){
     return { component_value: this.initial_value }
  }

}

这应该有效。

编辑：

如果你要连续改变道具（反应性），你必须使用计算属性，像这样

computed: { 
      component_value(){ 
           return JSON.parse(JSON.stringify(this.initial_value) 
          } 
   }

此致

Answer 2

最简单的方法是克隆您的 initial_value。

你可以这样做：

mounted() {
     this.component_value = JSON.parse(JSON.stringify(this.initial_value));
   }

这应该有效。

您可以查看更多答案here。

Answer 3

更改挂载钩子中的代码，如下所示

mounted() {
   this.component_value = JSON.parse(JSON.stringify(this.initial_value));
}

它将this.initial_value变量的值不只是通过引用而是通过它的数据。在JavaScript中，一个变量可以存储两种类型的数据：原始数据和引用数据。 this.initial_value 有参考数据，因为它的类型是一个数组。更多解释请阅读这篇文章source

vue js prop 等于 v-model

vue js prop equal to v-model

vue.js

vue-component

v-model

vue-props