vue 子组件修改 props

Question

以下面代码为例，组件内部不能直接去改变 props 的值，
但是，如果 prop 的值是数组，可以改，不过 eslint 会标红，建议最好不要这样写 Unexpected mutation of "list" prop.eslintvue/no-mutating-props

所以应该如何修改呢？
如果用 watch 监听，似乎又会很耗性能，还有没有什么好的办法呢？

父组件 index.vue

<!-- 父组件 index.vue -->
<template>
    <view>
        <Add :list="addList"></Add>
        <button @click='add'>添加</button>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const addList = ref([]);
const add = () => {
    addList.value.push('abc');
}
</script>

<style></style>

子组件 Add.vue

<!-- 子组件 Add.vue -->
<template>
    <view>
        <view v-for="(item, idx) in list" :key="idx" class="add">
            {{ item }}<button @click="del(idx)">删除</button>
        </view>
    </view> 
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    },
  },
});

const del = (idx) => {
  props.list.splice(idx, 1);
};
</script>

<style lang="scss" scoped>
.add {
    display: flex;
    flex-direction: row;
}
</style>

Answer 1

该回答引用ChatGPT

由于 Vue.js 的单向数据流机制，父组件传递给子组件的 prop 是只读的，子组件不应该直接修改这些 prop 的值。如果 prop 的值是数组或对象，直接修改这些 prop 的值不仅会导致 eslint 标红，也容易导致应用程序的数据不可预测，这是不好的实践。

为了解决这个问题，可以使用 Vue 提供的 $emit 方法向父组件发送事件，并在父组件中更新数据。具体来说，可以在子组件中定义一个方法，当需要修改 prop 中的值时，调用该方法并通过 $emit 方法触发一个事件，同时传递新值作为参数。在父组件中监听该事件，当事件触发时，更新相应的数据即可。这种方法可以避免直接修改 prop 的值，也不会造成性能问题。

以下是使用 $emit 方法实现的代码示例：

父组件 index.vue

<template>
  <view>
    <Add :list="addList" @delete="deleteItem"></Add>
    <button @click="addItem">添加</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const addList = ref([]);
const addItem = () => {
  addList.value.push('abc');
};
const deleteItem = (index) => {
  addList.value.splice(index, 1);
};
</script>

子组件 Add.vue

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="add">
      {{ item }}<button @click="deleteItem(index)">删除</button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    },
  },
});

const emits = defineEmits(['delete']);

const deleteItem = (index) => {
  emits('delete', index);
};
</script>

在子组件中，定义了一个 deleteItem 方法，该方法会在删除按钮被点击时调用，同时触发一个名为 delete 的事件，并将被删除元素的索引作为参数传递。在父组件中监听 delete 事件，并在事件处理程序中更新 addList 的值即可。

这种方法相对于 watch，可以避免无谓的计算和渲染，所以性能相对较好。