vue3 基本语法父子关系

news2025/6/3 11:25:25

在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 />标签。