Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

控制台报错:避免直接变异道具,因为每当父组件重新渲染时,该值将被覆盖。

问题情景:子组件接收到数据 并需要对数据进行更改
在这里插入图片描述

解决逻辑分析申明变量进行数据中转
用变量 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>

猜你喜欢

转载自blog.csdn.net/qq_45284938/article/details/126029307