避免在可重用组件中直接改变 prop

Posted 2023-02-22

【中文标题】避免在可重用组件中直接改变 prop

【英文标题】：Avoid mutating a prop directly in reusable components

【发布时间】：2019-10-24 02:01:33

【问题描述】：

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

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

最佳实践是什么以及我应该如何编写才能不具有道具变异值？

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

【问题讨论】：

请分享<SearchSelect />组件的代码。

【参考方案1】：

您无需更改属性，而是向父级发出事件。然后，父级会改变该值，并且该新值通常会回流到子级的属性中。

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

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

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

【讨论】：

是的，我在检查我的代码后设法解决了它。似乎突变后的原因是由于我在组件中设置了一个值。 ＆该值在我正在重用的文件中发生了变化。无论如何，我真的很感激这个