避免在可重复使用的组件中直接更改道具

时间:2019-06-09 09:13:57

标签: javascript vue.js

我试图重用我在组件文件中创建的自定义下拉列表,其中props是下拉列表中的值选项。当我开始选择下拉菜单时,我意识到vue警告消息:

[Vue警告]:避免直接更改道具,因为每当父组件重新渲染时,该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变:“物品”

什么是最佳实践?我该怎么写才能不具有prop muting价值?

<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>

1 个答案:

答案 0 :(得分:2)

您可以向父对象发送事件,而不是使属性发生变化。然后,父母更改该值,通常会将新值重排回孩子的财产。

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

对于您来说,newItem.a的所有者应该对其进行更新,但是很可能SearchSelect对其进行了设置而不是发出事件。

您还可以通过使用状态管理来避免向父母发送$emit,在这种情况下,store将成为真理的源泉;然后,您将使用commitdispatch而不是emit