避免在可重用组件中直接修改道具

Question

我试图重用我在组件文件中创建的自定义下拉列表，其中道具是下拉列表中的值选项。当我开始选择下拉列表时，我意识到一个vue warn msg：

[Vue warn]：避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具变异：“道具”

最佳做法是什么

<template>
  <v-app>
    <SearchSelect
        v-model="newItem.a"
        :options="aList"></SearchSelect>
    <SearchSelect
        v-model="newItem.b"
        :options="bList"></SearchSelect>
    <SearchSelect
         v-model="newItem.c"
         :options="cList"></SearchSelect>
  </v-app>
</template>



<script>
export default {
  name: "Sales",
  data() {
    return {
       aList: [
          { value: "A1", text: "A1" },
          { value: "A2", text: "A2" },
          { value: "A3", text: "A3" },
          { value: "A4", text: "A4" },
          { value: "A5", text: "A5" }
       ],
       bList: [
          { value: "B1", text: "B1" },
          { value: "B2", text: "B2" },
          { value: "B3", text: "B3" }
       ],
       cList: [
          { value: "C1", text: "C1" },
          { value: "C2", text: "C2" },
          { value: "C3", text: "C3" }
       ],
     }
   }
  }
};
</script>

Answer 1

您将向父级发出事件，而不是更改属性。然后父对象会对该值进行变异，新值通常会回流回子对象的属性。

父级中的v-model指令通过将其“拥有”的数据绑定到：value属性并侦听@input v-on事件来工作。

在您的情况下，newItem.a的所有者应该正在更新它，但最有可能的是SearchSelect正在设置它，而不是发出事件。

您还可以通过使用状态管理避免将$emit发送给父级，在这种情况下，存储将成为真相的来源；然后您将commit或dispatch而不是emit。