vue3 传值

// 父组件向子组件传值示例

// 父组件
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Hello from Parent');

    return {
      parentMessage
    };
  }
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

解释说明：

1. 父组件：在父组件中，我们使用 ref 创建了一个响应式的变量 parentMessage，并通过属性绑定 (:message="parentMessage") 将这个值传递给子组件。
2. 子组件：子组件通过 props 接收来自父组件的 message 属性，并在模板中显示它。

这种方式是 Vue 3 中父组件向子组件传递数据的常见方式。