Vue3组件通信方式

1. 常用的组件通信方式：

props：可以实现父子组件、子父组件、甚至兄弟组件通信

自定义事件：可以实现子父组件通信

全局事件总线$bus：可以实现任意组件通信

pubsub：发布订阅模式可以实现任意组件通信

vuex：集中式状态管理容器，实现任意组件通信

ref：父组件获取子组件实例VC，获取子组件的响应式数据以及方法

slot：插槽（默认插槽、具名插槽、作用域插槽）实现父子组件通信

2. props

可以实现父子组件通信，props数据是只读的。

子组件使用defineProps方法去接受父组件传递过来的数据；

举个例子：

父组件：

<template>
    <div>我是父组件</div>
    <Child info='曹操' :money="money" />
</template>

<script setup lang="ts">
import Child from './child.vue'
import ref from 'vue'
money = ref('100')
</script>

<style scoped>
</style>

子组件：

<template>
    <div class="son">
        <h1>我是子组件</h1>
        <p>{{props.info}}</p>
        <p>{{props.money}}</p>
        <!--props可以省略前面的名字-->
        <p>{{info}}</p>
        <p>{{money}}</p>
    </div>
</template>

<script setup lang="ts">
let props = defineProps(['info', 'money'])
</script>

<style scoped>
<style>

3. 自定义事件

在vue框架中事件分为两种：一种是原生的DOM事件，另外一种是自定义事件；

所谓的原生dom事件即可以让用户与网页进行交互，比如click、dbclick、change、mouseleave......

自定义事件即可以实现子组件给父组件传递数据。

利用defineEmits方法返回函数触发自定义事件。defineEmits方法不需要引入直接使用。

持续更新中...