如何通过 prop 传递变量并且不允许 child 更改它（vue 2）

Question

我正在将 prop 传递给 child 组件，并将 prop 值传递给 data() 变量。问题是，当我更改 data() 变量的值时，parent 上的值变为，我不知道为什么。

所以我在 parent 上有一个 v-for，我在其中调用 editar() 方法

<tr v-for="(mensagem,key) in  allMensagens" :key="key">
  <td class="tipo-mensagem-td">{{mensagem.titulo}}</td>
  <td class="text-center botoes">
   <div class="grupo-botoes">
    <a class="bi bi-pencil-square" role="button" v-on:click="editar(mensagem)" title="Editar Mensagem"></a>
   </div>
  </td>
 </tr>

然后在 editar 上我有这个，其中 mensagemEdit 是 parent 组件上的 data() variable：

editar(mensagem)
{
  this.mensagemEdit = mensagem;
  this.toggleCriarMensagem("edit"); 
}

然后显示要编辑的表格我有这样的东西

 <template v-if="criarMensagem">
   <keep-alive>
     <FormAddEditMensagem :mensagemEdit="mensagemEdit" :tipoMensagem="'E'" :acao="acao"/>
   </keep-alive>
 </template>

我将 mensagemEdit 发送到 child，然后我在上面有这行代码，其中 mensagem 是 child 上的 data() 变量：

activated() {
    this.mensagem = this.mensagemEdit;
},

问题在于，当我编辑 this.mensagem 上的值时，parent 中的 mensagemEdit 假设值，以及 v-for 中的 mensagem 接受该值值，所以如果我关闭表单，更改 criarMensagem to false 的值，我会得到未保存但已编辑的 table 值，我不想要那个。

Answer 1

您可以使用以下方法克隆道具值：

如果值为简单数据类型（字符串、布尔、数字）：

this.mensagem = JSON.parse(JSON.stringify(this.mensagemEdit));

如果值是一个简单的对象：

this.mensagem = Object.assign({}, this.mensagemEdit);

对于更复杂的值（对象数组、嵌套对象），我建议使用 lodash：

import { cloneDeep } from "lodash"

this.mensagem = cloneDeep(this.mensagemEdit);

如何通过 prop 传递变量并且不允许 child 更改它（vue 2）

How to pass a variable by prop and not allow child to change it ( vue 2 )

vue.js

vue-component

vuejs2