首页 > 其他分享> > 浅谈vue3各组件通信

浅谈vue3各组件通信

2022-02-10 17:59:08 作者：互联网

在平时前端开发中多少都会用到组件通信，今天来总结一下各组件的通信

一、父子组件通信

父传子（prop）

父传子主要就是在子组件中定义prop属性，添加需要传入的值，例如：

//子组件
//template标签省略了
<script>
    export default {
        data() {
            return {
                childrenMsg: 'aaaa'
            }
        },
        props: {
            parentMsg: {
                type:String,
                default(){
                }
            }
        }     
    }
</script>

接着在父组件引入注册组件后，在子组件标签中使用 :prop定义的字段=" 要传入的字段 "传入，如:

//父组件
<template>
  <div id="app">
    <children :parentMsg="parentMsg"></children>
  </div>
</template>
<script>
  import children from './blog/children'
  export default{
    components: {
      children
    },
    data() {
      return {
        parentMsg:"父组件的信息"
      }
    },
  }
</script>

展示出来的样子就是这样：
在这里插入图片描述

子传父 ($emit)

子传父主要用到的是$emit(’ 要传递的名称’,参数),在父组件中监听这个事件即可，例如：

//子组件
<template>
    <div class="children">
        <button @click=sendMsg> 传递信息</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                childrenMsg: 'aaaa'
            }
        },
        methods: {
            sendMsg(){
                this.$emit('childrenMsg',this.childrenMsg)
            }
        },
    }
</script>

在子组件中的button绑定click事件，使用this.$emit()发送想要传递的事件名以及参数，当然，参数可以传多个

//父组件
<template>
    <div class="parent">
        <children></children>
        <p>{{}}</p>
    </div>
</template>
<script>
    import children from './children'
    export default{
        component:{
            children
        }
    }
</script>

二、爷孙通信(provide,inject)

爷孙这种通过两个父子的传递方式这里就先不说了，方法跟第一部分一样。

这里将要使用到的方法是inject和provide属性来进行通信。

//孙组件
<template>
    <div class="grandSon">
        <div> 这是爷爷节点传来的信息:{{provideMsg}}</div>
    </div>
</template>
<script>
    export default {
        inject:['provideMsg']
    }
</script>

孙节点只需要定义inject，并用数组将需要接收的值装起来后直接用即可

//爷组件
<template>
  <div id="app">  
    <children></children>
  </div>
</template>

<script>
  import children from './blog/children'

  export default{
    components: {
      children
    },
    data() {
      return {
        someMsg:'someMsg!!'
      }
    },
    provide(){
      return{
        provideMsg:this.someMsg
      }
    },
  }
</script>

运行结果：
在这里插入图片描述

这里需要注意provide的值传递过去后，即便provide值重新更改了，inject不会再收到provide改变后提供的值，若想响应式传递则需要使用computed来传递详见Vue官网(https://v3.cn.vuejs.org/guide/component-provide-inject.html#%E5%A4%84%E7%90%86%E5%93%8D%E5%BA%94%E6%80%A7)

三、兄弟通信(事件总线)

由于我们聊的是vue3版本，所以完成事件总线功能可以使用mitt库，只需要安装一下即可使用，非常方便。
首先创建一个名为eventBus.js的文件，笔者推荐新建一个utils的目录，将文件放到该目录下使用。

//eventBus.js
//导入mitt
import mitt from 'mitt'
//定义一个emitter接收mitt函数调用的返回值
const emitter = mitt() 
//导出emitter
export default emitter

发送组件调用emmiter.emit(‘事件名’，参数) 用法大致跟子父组件通信一样

//发送组件
<template>
    <div class="eventBusSend">
        <button @click="emitterClick" >事件总线发出</button>
    </div>
</template>
<script>
  import emitter from '../utils/eventBus.js'

    export default {
        inject:['provideMsg'],
        methods: {
            emitterClick(){
                emitter.emit('event1',123456)
            }
        },
    }
</script>

//接收组件
<template>
  <div id="app">  
    <children></children>
    <div>使用事件总线接收的信息:{{emitterMsg}}</div>
  </div>
</template>
<script>
  import children from './blog/children'
  import emitter from './utils/eventBus'  
  export default{
    components: {
      children
    },
    data() {
      return {
        emitterMsg:""
      }
    },
    created() {
      emitter.on('event1',(info)=>{
        this.emitterMsg = info 
      })
    },
  }
</script>

在这里插入图片描述

本文共介绍了三种通信方式，大致能满足日常的需求。如有不足之处，欢迎指出。

以上