时间戳

首页 > 解决方案 > Vue 3：如何使用组合 API 正确更新组件道具值？

javascript - Vue 3：如何使用组合 API 正确更新组件道具值？

问题描述

我喜欢这个组件：

<template>
  <div>
    <p>Current coords: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">
  </div>
</template>
<script>
export default {
  props: {
    coords: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const updateCoords = () => {
      props.coords = [38.561785, -121.449756]
      // props.coords.value = [38.561785, -121.449756]
    }
    return { updateCoords }
  },
}
</script>

我尝试coords使用方法更新道具值，updateCoords但收到错误消息：

未捕获的类型错误：无法设置未定义的属性（设置“坐标”）

在我的情况下，如何正确更新道具值？

标签： javascriptvue.jsvue-componentvuejs3vue-props

解决方案

道具是只读的：
https ://v3.vuejs.org/guide/component-props.html#one-way-data-flow

如果您想对 props 进行两种绑定，则需要实现 v-model 模式：
https ://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax

<template>
  <div>
    <p>Current coords: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">
  </div>
</template>
<script>
export default {
  props: {
    modelValue: {
      type: Array,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, {emit}) {
    const updateCoords = () => {
        emit('update:modelValue', [38.561785, -121.449756])
    }
    return { updateCoords }
  },
}
</script>

推荐阅读