Vue3 的7种组件通信方式

前言 ：本文章全部采用<script setup> 这种组合API的方式

本篇文章将介绍如下7种组件通信的方式

● props

● emit

● v-model

● refs

● provide / inject

● eventBus

● vuex / pinia（状态管理工具）

props

props是vue中最常见的一种 父传子的通信方式

vue3 中子组件接受父组件的 方式是 defineProps

//父组件
<template>
    //子组件
    <child :list="list"></child>
</template>
//采用组合API 的方式
<script setup>
    import child from '子组件的路径'
    //vue3的 独特写法 
    import {ref} from vue
    let list = ref("值")
</script>

//子组件
<script setup>
    //子组件 接受父组件 传递的值 defineProps
    import {defineProps} from vue
    const props =defineProps({
        list:{
            type:String,
            default:''
        }
    })
</script>

emit

emit 也是vue中最常用的组件通信方式  用于 子传父  

vue3 子组件向外面暴露 的方法是 defineEmits（["name"]）（可能是多个）  接着 emits（“name”）

//子组件
<script setup>
    import {ref，defineEmits} from vue
    const name= ref('yf')
    //子组件向 父组件 暴露的方式
    const nameBtn = defineEmits(['BtnName'])
    const btn = ()=>{
        emits("BtnName" , name)
    }
<script>

//父组件
<template>
    <child @BtnName="BtnName"></child>
</template>
<script setup>
    import child from "子组件的路径"
    const BtnName = value =>{
        console.log(value) //yf
    }
</script>

v-model  双向绑定

组件间的绑定 

refs

使用this.$refs.name 的方式获取指定元素或者组件

vue3 想要通过ref的方式 获取组件或元素 都需要定义一个Ref对象 在组件挂载就可以访问了

//父组件
<template>
    //子组件
    <child ref="child"/>
</template>
<script setup>
    import {ref} from vue
    import child from './child.vue'
    const childRefs = ref(null)
</script>

//子组件
<script setup>
    import {ref,defineExpose} from vue
    const list = ref(['1','2'.'3'])
    //setup 组件是默认关闭的 如果需要通过ref来获取 需要通过 defineExpose 来暴露出来
    defineExpose({list})
</script>

provide 和 inject 方式

provide 和inject 是vue提供的一对API  这对API 可以实现组件之间的通信 无论层级有多深 都可以通过这对API 来实现

//父组件
<template>
    <child/> //子组件
</template>
<script setup>
    import {ref,provide} from vue
    const msg = ref('1')
    //向子组件 提供数据
    provide('msgdata',msg) 
</script>

//子组件
<script setup>
    import {inject} from vue
    //接受 由provide 传递过来的值
    const list = inject('msgdata')
</script>

vuex 状态管理工具 

轻松实行组件之间的通信，vuex 的模块化管理也是一个不错的管理