vue3组件通信

Vue3是Vue.js的最新版本，它引入了一些新的特性和改进，包括更好的性能、更好的类型检查、更好的开发体验等。在Vue3中，组件通信仍然是一个非常重要的话题，因为在大多数应用程序中，不同的组件之间需要进行数据传递和交互。

在Vue3中，组件通信有多种方式可供选择，包括props、事件、provide/inject、$attrs/$listeners、ref和响应式API等。下面将详细介绍每种方式的使用方法和特点。

1. Props
   Props是Vue中最常用的一种组件通信方式，它允许父组件向子组件传递数据。在Vue3中，使用props的方式与Vue2中基本相同，父组件通过在子组件上定义props属性来传递数据，子组件通过props选项来接收数据。

父组件中的示例代码：

<template>
  <child-component :message="message"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
     
  components: {
     
    ChildComponent
  },
  data() {
     
    return {
     
      message: 'Hello from parent component'
    };
  }
};
</script>

子组件中的示例代码：

<template>
  <div>{
  { message }}</div>
</template>

<script>
export default {
     
  props: {
     
    message: {
     
      type: String,
      required: true
    }
  }
};
</script>

2. 事件
   事件是Vue中另一种常用的组件通信方式，它允许子组件向父组件发送消息。在Vue3中，使用事件的方式与Vue2中基本相同，子组件通过$emit方法触发一个事件，父组件通过在子组件上使用v-on指令来监听事件。

子组件中的示例代码：

<template>
  <button @click="sendMessage">Send Message</button>
</template>