vue3 props数组改值

在 Vue3 中，我们可以使用`props`属性来声明组件的属性。如果`props`属性是一个数组，那么每个元素表示一个属性名。当父组件向子组件传递属性时，子组件将获得一个具有相应属性名的 `prop`对象。由于 `prop`对象是单向数据流，当我们需要改变 `prop`对象的值时，应该通过 `$emit`事件来向父组件发送消息。示例代码如下：

<!-- 子组件 -->
<template>
  <div>{{ list }}</div>
  <button @click="changeList">改变list</button>
</template>

<script>
  export default {
    props: ['list'],
    methods: {
      changeList() {
        // 向父组件发送 "change" 事件，并传递最新的 list 值
        this.$emit('change', ['d', 'e', 'f'])
      }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :list="list" @change="handleListChange"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        list: ['a', 'b', 'c']
      }
    },
    methods: {
      handleListChange(newList) {
        // 接收子组件发送的 "change" 事件，并更新 list 值
        this.list = newList
      }
    }
  }
</script>

上面的代码中，我们在子组件中声明了一个 `list` 属性，然后在子组件中使用 `$emit` 方法向父组件发送 `change` 事件，并传递了最新的 `list` 值。在父组件中，我们监听了 `change` 事件，并在事件处理函数中更新了 `list` 值。当我们点击子组件中的按钮时，`list` 值会被改变，并且父组件中的 `list` 值也随之更新。