控制台报错:避免直接变异道具,因为每当父组件重新渲染时,该值将被覆盖。
问题情景:子组件接收到数据 并需要对数据进行更改
解决逻辑分析: 申明变量进行数据中转
用变量 test1Copy 对传入参数 test1 进行中转渲染
<template>
<div>
<p>{{ test1Copy }}</p>
<button @click="changeProp">修改传入参</button>
</div>
</template>
<script>
export default {
name: "Demo1",
props: ['test1'],
data() {
return {
test1Copy: this.test1, // 数据中转
};
},
methods: {
changeProp() {
this.test1Copy = 6666666;
},
},
};
</script>