两种方法解决子组件修改父组件传入的值。(Computed property “xxx“ was assigned to but it has no setter.)

需求：

子组件需要修改父组件传入的checkList,开发时尝试使用了compouer，情况并不乐观。

修改前代码:

·父组件

<template>
	<div>
	  <SelectPanel
      :title="productConfig.title"
      :optionList="productConfig.optionList"
      :checkList.sync="productConfig.checkList"
    />
  </div>
</template>
<script>
	import SelectPanel from "./components/selectPanel";
	export default {
		components: { SelectPanel },
		 data() {
				productConfig: {
        title: "产品中心",
        optionList: [
          {
            id: 1,
            name: "接口1",
          },
          {
            id: 2,
            name: "接口3",
          },
          {
            id: 3,
            name: "接口dsadasdsa1",
          },
          {
            id: 4,
            name: "接口1",
          },
          {
            id: 5,
            name: "接口1",
          },
        ],
        checkList: [2, 3],
      	},
	}
	}
</script>

子组件

<template>
  <div class="selectPanel">
    <div class="panelTitle">
      <span class="blueBlock"></span>
      <h5>{{ title }}</h5>
    </div>
    <div class="panelContainer">
      <el-checkbox-group
        v-model="checkedList"
        @change="handleCheckedCitiesChange"
      >
        <template
          ><el-checkbox
            :label="item.id"
            v-for="(item, index) in optionList"
            :key="index"
            >{{ item.name }}</el-checkbox
          ></template
        >
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "selectPanel",
  props: {
    title: {
      type: String,
      default: "",
    },
    optionList: {
      type: Array,
      default: [],
    },
    checkList: {
      type: Array,
      default: [],
    },
  },

  computed: {
  /*
  *使用computed会报错：Computed property "xxx" was assigned to but it has no setter.
  */
   checkedList: function () {
      return this.checkList;

    },
  },
  data() {
    return {
      checkedList: [],
    };
  },
  methods: {
    handleCheckedCitiesChange(value) {
      console.log(value);
      this.$emit("update:checkList", value);
    },
  },
  mounted() {},
};
</script>

修改后代码

方法一：使用watch

·父组件

<template>
	<div>
	  <SelectPanel
      :title="productConfig.title"
      :optionList="productConfig.optionList"
      :checkList.sync="productConfig.checkList"
    />
  </div>
</template>
<script>
	import SelectPanel from "./components/selectPanel";
	export default {
		components: { SelectPanel },
		 data() {
				productConfig: {
        title: "产品中心",
        optionList: [
          {
            id: 1,
            name: "接口1",
          },
          {
            id: 2,
            name: "接口3",
          },
          {
            id: 3,
            name: "接口dsadasdsa1",
          },
          {
            id: 4,
            name: "接口1",
          },
          {
            id: 5,
            name: "接口1",
          },
        ],
        checkList: [2, 3],
      	},
	}
	}
</script>

·子组件

<template>
  <div class="selectPanel">
    <div class="panelTitle">
      <span class="blueBlock"></span>
      <h5>{{ title }}</h5>
    </div>
    <div class="panelContainer">
      <el-checkbox-group
        v-model="checkedList"
        @change="handleCheckedCitiesChange"
      >
        <template
          ><el-checkbox
            :label="item.id"
            v-for="(item, index) in optionList"
            :key="index"
            >{{ item.name }}</el-checkbox
          ></template
        >
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "selectPanel",
  props: {
    title: {
      type: String,
      default: "",
    },
    optionList: {
      type: Array,
      default: [],
    },
    checkList: {
      type: Array,
      default: [],
    },
  },

  watch: {
    checkList(newValue) {
      if (newValue) {
        console.log("watch");
        this.checkedList = newValue;
       }
    },
  },
  data() {
    return {
      checkedList:this.checkList,
    };
  },
  methods: {
    handleCheckedCitiesChange(value) {
      console.log(value);
      this.$emit("update:checkList", value);
      //通过$emit修改父组件中checkList的值并监听到checkList的变化后赋值给子组件中的checkedList
    },
  },
  mounted() {},
};
</script>

方法二：使用v-model（很少用，computed和watch都不能达到需求时可以尝试使用）

·父组件

<template>
	<div>
	  <SelectPanel
      :title="productConfig.title"
      :optionList="productConfig.optionList"
       v-model="productConfig.checkList"
    />
    /*修改处一：v-model="productConfig.checkList"*/
  </div>
</template>
<script>
	import SelectPanel from "./components/selectPanel";
	export default {
		components: { SelectPanel },
		 data() {
				productConfig: {
        title: "产品中心",
        optionList: [
          {
            id: 1,
            name: "接口1",
          },
          {
            id: 2,
            name: "接口3",
          },
          {
            id: 3,
            name: "接口dsadasdsa1",
          },
          {
            id: 4,
            name: "接口1",
          },
          {
            id: 5,
            name: "接口1",
          },
        ],
        checkList: [2, 3],
      	},
	}
	}
</script>

·子组件

<template>
  <div class="selectPanel">
    <div class="panelTitle">
      <span class="blueBlock"></span>
      <h5>{{ title }}</h5>
    </div>
    <div class="panelContainer">
      <el-checkbox-group
        v-model="checkedList"
        @change="handleCheckedCitiesChange"
      >
        <template
          ><el-checkbox
            :label="item.id"
            v-for="(item, index) in optionList"
            :key="index"
            >{{ item.name }}</el-checkbox
          ></template
        >
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "selectPanel",
  /*修改处二：*/
  model: {
    prop: "checkList",
    event: "change",
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    optionList: {
      type: Array,
      default: [],
    },
    checkList: {
      type: Array,
      default: [],
    },
  },
  /*修改处三：*/
  watch: {
    checkedList(newValue) {
      this.$emit("change", newValue);
    },

  },
  data() {
    return {
     checkedList:this.checkList,
    };
  },
  },
};```