在Vue 3中，父组件传递数据给子组件通常使用props。以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component :parentData="message" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const message = ref('Hello from parent!');
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    {{ parentData }}
  </div>
</template>
 
<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
  parentData: String
});
</script>

在这个例子中，ParentComponent 使用 child-component 标签并通过 : 语法绑定了一个名为 parentData 的prop，其值为父组件中的 message 变量。ChildComponent 组件通过 defineProps 定义了它期望接收的 parentData prop，并且该 prop 被声明为 String 类型。子组件内部通过模板直接显示接收到的 parentData。

• 本文标题： Vue3 父传子
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

留言评论

• 上一篇： vue3子传父三种方法
• 下一篇： VSCode远程开发绑定Gitee