vue3组件通信的方式

一、父组件给子组件传值

父组件中如何传：

在子组件标签体内写上要传递的数据，:text1="text1"，是动态绑定要传递的数据

<!-- 父组件中传递的方法 -->
<template>
    <div class="father">我是home
        <Son :text1="text1" />
    </div>
</template>

<script setup lang="ts">
/**引入子组件 */
import Son from './Son.vue'
import { ref } from 'vue'
/**要传递过去的信息 */
const text1 = ref('信息1')
</script>

子组件中如何接：

使用defineProps

<!-- 子组件中接收数据 -->
<template>
    <div class="son">这是父组件穿过来的数据-->{
  { text1 }}</div>
</template>

<script setup lang="ts">
/**使用defineProps接收传过来的数据*/
const props = defineProps(['text1'])

/**父组件传递过来的数据在插值语法中可以直接写变量名，
 * 在script标签中需要写上props前缀，否则会报错
 */
console.log(props.text1)

vue3中的引用数据类型是通过proxy完成的响应式，因此在组件传参的过程中可以修改引用数据类型 ；原始数据类型仍然保留了objectdefineproperty()的响应式原理，因此原始数据类型的数据为只读数据，无法直接修改，需要先绑定再通过回调函数传参的方式修改(v-model语法糖的原理也是使用这一方式；v-model传参详见本文第四段内容)

二、子组件给父组件传值

子组件如何传：

<template>
    <div class="son">我是子组件</div>
    <button @click="transmit">点我给父组件传递数据</button>
</template>

<script setup lang="ts">
/**子组件通过defineEmits方法返回函数触发自定义事件*/
const $emit = defineEmits(['give']) 

/**点击按钮触发自定义事件$emit*/
const transmit = ()=>{
    /**一个参数是自定义事件名，第二个参数是要传递的值 */
    $emit('give','123456')
}
</script>

父组件如何接：

<template>
<div class="father">
    我是text1
    <Son @give="handler"></Son>
</div>
</template>

<script setup lang="ts">
import Son from './Son.vue';
/**自定义事件对应的函数，子组件中触发自定义事件，通过这个函数接收并处理
 * 子组件传递过来的数据
 */
const handler = (v) => {
    // 参数v为子组件传递过来的数据
    console.log(v)
}
</script>

 三、全局事件总线（适合不相干组件间通信）

1.先引入mitt包，注册全局事件总线$bus

文件位置

 index.ts中的代码：

import mitt from 'mitt'
const $bus = mitt()
export default $bus

2.接收数据的组件中如何使用全局事件总线

<template>
    <div class="son1">我是组件1，我接收数据</div>
</template>

<script setup lang="ts">
/**导入$bus */
import $bus from '@/bus'
import { onMounted } from 'vue';
/**使用$bus 绑定一个事件 将来用来接收兄弟组件传递过来的数据 */
onMounted(() => {
    //第一个参数为事件类型，第二个参数为事件回调函数
    $bus.on('foo',a=>{
        console.log(a)
    })
})

3.传递数据的组件中如和使用全局事件总线

<template>
    <div class="son2">
        我是组件2,我传递数据
        <button @click="handler">点我传递数据</button>
    </div>
    
</template>

<script setup lang="ts">
import $bus from '@/bus'
const handler = ()=>{
    //使用emit触发事件，第一个参数为事件名，第二个参数为传递数据
    $bus.emit('foo',2)
}
</script>

四、v-model实现组件通信

使用v-model进行组件通信相当于使用了props[modelValue] + 自定义事件 update:modelValue。

情况一࿱