vue3组件通信

Vue3的组件通信方式和Vue2有些不同，主要是因为Vue3中使用了Composition API，其中提供了两种方式进行组件通信：

1. Props 和 Emit
这是Vue2中也存在的方式，通过在父组件中向子组件传递props，子组件通过emit事件向父组件传递信息。在Vue3中，可以使用 `defineProps` 和 `defineEmits` 来定义props和emit事件。示例：

<!-- Parent.vue -->
<template>
  <Child :msg="message" @send-msg="handleMsg"></Child>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Child from './Child.vue'

export default defineComponent({
  components: {
    Child
  },
  setup() {
    const message = ref('Hello')

    const handleMsg = (msg) => {
      console.log(`Received message from child: ${msg}`)
    }

    return {
      message,
      handleMsg
    }
  }
})
</script>

<!-- Child.vue -->
<template>
  <button @click="sendMsg">Send Message</button>
</template>

<script>
import { defineComponent, defineEmits, propType } from 'vue'

export default defineComponent({
  emits: ['send-msg'],
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const sendMsg = () => {
      emit('send-msg', 'Hello from child')
    }

    return {
      sendMsg
    }
  }
})
</script>

2. Provide 和 Inject
Provide和Inject是Vue3中新增的方式，可以在父组件中提供数据，让子组件中使用。Provide和Inject可以传递任何类型的数据，包括对象、数组、函数等。示例：

<!-- Parent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <Child />
  </div>
</template>

<script>
import { defineComponent, provide } from 'vue'
import Child from './Child.vue'

export default defineComponent({
  components: {
    Child
  },
  setup() {
    provide('title', 'Hello from parent')
  }
})
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>{{ subtitle }}</h2>
  </div>
</template>

<script>
import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const title = inject('title', 'Default title')
    const subtitle = 'Hello from child'

    return {
      title,
      subtitle
    }
  }
})
</script>

以上是两种Vue3中常用的组件通信方式，具体使用哪种方式取决于组件之间的关系和需求。