如何通过prop传递变量并且不允许子变量更改它(vue 2)

Question

我将一个prop传递给子组件，并将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>

然后在编辑器中，我有这个，其中mensagemEdit是父组件上的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>

我将messagemedit发送给child，然后在它上面我有这行代码，其中mensagem是data()变量on child:

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

问题是，当我编辑这个值。messagem,mensagemEdit从父假设值，和messagem从v-for，采取的值，所以如果我关闭表单，改变criarMensagem to false的值，我得到没有保存，但编辑的值在表上，我不想要的。

Answer 1

您可以使用以下方法克隆prop值:

1. 如果值是简单数据类型(字符串，布尔值，数字):

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

2. 如果值是一个简单对象:

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

3. 对于更复杂的值(对象数组，嵌套对象)，我建议使用lodash:

import { cloneDeep } from "lodash"
this.mensagem = cloneDeep(this.mensagemEdit);