当前位置：首页 > article >正文

vue3 基本语法父子关系

article 2025/8/13 20:04:05

在Vue 3中，父子组件的关系是通过组件的嵌套实现的。父组件可以传递数据（props）给子组件，同时子组件可以通过事件（emits）与父组件通信。下面是如何在Vue 3中建立和使用父子组件的基本语法：

1. 创建子组件

首先，你需要创建一个子组件。假设我们有一个名为ChildComponent.vue的子组件。

ChildComponent.vue

<template><div><p>{{ message }}</p><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {props: {message: String,},emits: ['child-event'],methods: {sendToParent() {this.$emit('child-event', 'Hello from Child');}}
}
</script>

2. 在父组件中使用子组件

然后，在父组件中引入并使用这个子组件。父组件可以传递数据给子组件，并且监听子组件触发的事件。

ParentComponent.vue

<template><div><ChildComponent :message="parentMessage" @child-event="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue'; // 确保路径正确export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent'}},methods: {handleChildEvent(message) {console.log('Message from child:', message); // 处理来自子组件的消息}}
}
</script>

Props传递：在子组件中，通过props接收从父组件传递的数据。在ChildComponent模板中，{{ message }}会显示父组件传递的parentMessage。
事件触发：在子组件中，通过this.$emit('child-event', 'Hello from Child')触发一个自定义事件，并传递数据。在父组件中，通过@child-event="handleChildEvent"监听这个事件，并定义一个方法来处理这个事件。
组件注册：在父组件的components选项中注册子组件，这样父模板中才能使用<ChildComponent />标签。