vue js prop 等于 v-model

Posted 2023-02-23

【中文标题】vue js prop 等于 v-model

【英文标题】：vue js prop equal to v-model

【发布时间】：2020-05-05 18:34:55

【问题描述】：

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

export default
  props: 
    initial_value: Array,
  ,

  data()
     return  component_value: [] 
  ,

   mounted()
     this.component_value = this.initial_value;
   

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

我想在这里写下我的全部代码，但只是试着让它变短。

【参考方案1】：

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

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

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

【参考方案2】：

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

你可以这样做：

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

这应该可行。

您可以查看更多答案here。

【参考方案3】：

export default
  props: ['initial_value'],

  data()
     return  component_value: this.initial_value 
  

这应该可行。

编辑：

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

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

问候