Vue3全家桶 - Vue3 - 组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）

在Vue3中，我们可以通过几种方式来注册组件，并实现组件间的通信，包括透传属性和事件，以及使用插槽。

1. 全局注册和使用组件

// 创建一个组件
const MyComponent = {
  template: '<div>Hello, I am a component!</div>'
}
 
// 全局注册组件
app.component('my-component', MyComponent)
 
// 在模板中使用
<template>
  <my-component></my-component>
</template>

2. 组件间通信 - Props

// 父组件
const ParentComponent = {
  template: `
    <child-component :parentMessage="message"></child-component>
  `,
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
 
// 子组件
const ChildComponent = {
  props: ['parentMessage'],
  template: `<div>{{ parentMessage }}</div>`
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

3. 组件间通信 - Events

// 子组件
const ChildComponent = {
  template: `
    <button @click="$emit('childEvent', 'Hello from child')">Click me</button>
  `
}
 
// 父组件
const ParentComponent = {
  template: `
    <child-component @childEvent="handleEvent"></child-component>
  `,
  methods: {
    handleEvent(payload) {
      console.log(payload) // 输出: 'Hello from child'
    }
  }
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

4. 使用插槽

// 父组件
const ParentComponent = {
  template: `
    <child-component>
      <template #default="{ user }">
        {{ user.name }}
      </template>
    </child-component>
  `
}
 
// 子组件
const ChildComponent = {
  template: `
    <div>
      <slot :user="user"></slot>
    </div>
  `,
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  }
}
 
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

以上代码展示了如何在Vue3中注册组件、通过props和events进行父子组件间的通信，以及如何使用插槽来传递和渲染子组件的内容。这些是构建Vue应用的基本技能，对于学习Vue3非常有帮助。