Vue 3 中 Props 传值的完整指南

<template>
  <div>
    <span>{{ label }}</span> <!-- 显示传入的 label 值 -->
    <input v-model="inputValue" /> <!-- 绑定本地数据 inputValue 到输入框 -->
  </div>
</template>
 
<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: 'Label'
    }
  },
  emits: ['update:modelValue'], // 显式声明触发的自定义事件
  computed: {
    inputValue: {
      // 使用计算属性以便响应式地传递值和接收更新
      get() {
        return this.modelValue; // 从 prop 获取值
      },
      set(value) {
        this.$emit('update:modelValue', value); // 触发自定义更新事件
      }
    }
  }
};
</script>

这个例子中，我们创建了一个Vue组件，它接收一个名为modelValue的prop，并通过计算属性inputValue与输入框绑定。当输入框的值发生变化时，我们触发一个自定义的更新事件update:modelValue，并将新值传递给父组件。这是Vue 3中推荐的用于处理props传值的方法。