避免改变道具：vuejs 2

Question

这是我运行代码时控制台中显示的内容：“避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，请使用基于道具值的数据或计算属性。道具正在发生变化： “已检查”。我已经看到其他帖子对此的看法，但我无法根据我的问题进行调整。有人可以向我解释一下吗？

父母： 模板：

<div class="checkBox-container">
<input type="checkbox"/>
<!-- <div class="check" :class="[size]" v-if="!isChecked"></div>
<div class="check" :class="[size]" v-else>
  <div>v</div>
</div> -->
<div class="check" :class="[size]" @click="changeVal">
  <div v-if="isChecked">v</div>
</div>
<div><label class="label">{{label}}</label></div>
<div><span class="subLabel">{{subLabel}}</span></div>

脚本：

export default {
  name: "ax-checkbox",
  props: {
     label: String,
    subLabel: String,
    size: String,
    isChecked: false,
    checks: []
  },
  methods: {
    changeVal() {
      this.isChecked = !this.isChecked;
      this.$emit("changeVal");
    }
  }
};

孩子

<div class="filters">
    <ax-checkbox label="Où :" subLabel="Ville" size="small"></ax-checkbox>
    <div class="separator"></div>
    <ax-checkbox label="Quoi :" subLabel="Thématique(s)" size="small"></ax-checkbox>
    <div class="separator"></div>
    <ax-checkbox label="Quand :" subLabel="Dans..." size="small"></ax-checkbox>
</div>

Answer 1

看起来您正在尝试更新传递到组件中的属性值，但您的组件实际上是自定义输入组件。查看有关此主题的优秀 Vue 文档。我总结了以下想法。

Vue 中的 2 路数据绑定由v-model. 应用于你的 isChecked 属性v-model="isChecked"，这实际上是 的语法糖:value="isChecked" @input="evt => isChecked = evt.target.value"。

因此，对于您的组件，您需要执行以下操作：

1. 将属性名称更新isChecked为value

2. 在您的changeVal方法中，发出一个输入事件，例如：

   changeVal() { this.$emit("input", !this.value); }

如果需要，您仍然可以发出该changeVal事件。