Vue 3使用Composition API时如何正确更新组件props的值

• Vue遵循单向数据流设计，props 是父组件传递给子组件的只读属性，子组件禁止直接修改 props，所有 props 的变更必须由数据源所在的父组件完成。
• 你代码中直接给 props.coords 赋值的写法不符合规范，且 props 对象本身不是 Ref 类型，不需要通过 .value 访问属性，所以注释掉的写法也是错误的。

子组件改造 #

子组件通过触发自定义事件的方式，将新的坐标值传递给父组件：

<template>
  <div>
    <p>Current coords: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">更新坐标</button>
  </div>
</template>
<script>
export default {
  props: {
    coords: {
      type: Array,
      required: true
    }
  },
  // 声明自定义事件，可选但推荐添加，提升代码可维护性
  emits: ['update:coords'],
  setup(props, { emit }) {
    const updateCoords = () => {
      // 触发事件，传递新坐标参数
      emit('update:coords', [38.561785, -121.449756])
    }
    return { updateCoords }
  },
}
</script>

父组件改造 #

父组件监听子组件抛出的事件，更新自身存储的坐标数据源即可：

<!-- 父组件模板常规写法 -->
<YourComponent :coords="coords" @update:coords="(newVal) => coords = newVal" />

<!-- 也可以用 v-model 语法糖简写，效果完全一致 -->
<YourComponent v-model:coords="coords" />

内容的提问来源于stack exchange，提问作者Andreas Hunter