盘点Vue2和Vue3的10种组件通信方式(值得收藏)

携手创作，共同生长！这是我参与「日新计划 8 月更文应战」的第5天，点击检查活动详情

Vue中组件通讯办法有很多，其间Vue2和Vue3完成起来也会有很多差异；本文将经过选项式API 组合式API以及setup三种不同完成办法全面介绍Vue2和Vue3的组件通讯办法。其间将要完成的通讯办法如下表所示

办法	Vue2	Vue3
父传子	props	props
子传父	$emit	emits
父传子	$attrs	attrs
子传父	$listeners	无(合并到 attrs办法)
父传子	provide/inject	provide/inject
子组件拜访父组件	$parent	无
父组件拜访子组件	$children	无
父组件拜访子组件	$ref	expose&ref
兄弟传值	EventBus	mitt

props

props是组件通讯中最常用的通讯办法之一。父组件经过v-bind传入，子组件经过props接纳，下面是它的三种完成办法

• 选项式API

//父组件
<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data() {
    return {
      parentMsg: '父组件信息'
    }
  }
}
</script>
//子组件
<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {
  props:['msg']
}
</script>

• 组合式Api

//父组件
<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import { ref,defineComponent } from 'vue'
import Child from './Child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const parentMsg = ref('父组件信息')
    return {
      parentMsg
    };
  },
});
</script>
//子组件
<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script>
import { defineComponent,toRef } from "vue";
export default defineComponent({
    props: ["msg"],// 假如这行不写，下面就接纳不到
    setup(props) {
        console.log(props.msg) //父组件信息
        let parentMsg = toRef(props, 'msg')
        return {
            parentMsg
        };
    },
});
</script>

• setup语法糖

//父组件
<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const parentMsg = ref('父组件信息')
</script>
//子组件
<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script setup>
import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
</script>

留意

props中数据流是单项的，即子组件不可改变父组件传来的值

在组合式API中，假如想在子组件中用其它变量接纳props的值时需求运用toRef将props中的特点转为呼应式。

emit

子组件能够经过emit发布一个事情并传递一些参数，父组件经过v-on进行这个事情的监听

• 选项式API

//父组件
<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  methods: {
    getFromChild(val) {
      console.log(val) //我是子组件数据
    }
  }
}
</script>
// 子组件
<template>
  <div>
    <button @click="sendFun">send</button>
  </div>
</template>
<script>
export default {
  methods:{
    sendFun(){
      this.$emit('sendMsg','我是子组件数据')
    }
  }
}
</script>

• 组合式Api

//父组件
<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
    return {
      getFromChild
    };
  },
});
</script>
//子组件
<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        const sendFun = () => {
            ctx.emit('sendMsg', '我是子组件数据')
        }
        return {
            sendFun
        };
    },
});
</script>

• setup语法糖

//父组件
<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script setup>
import Child from './Child'
const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
</script>
//子组件
<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>
<script setup>
import { defineEmits } from "vue";
const emits = defineEmits(['sendMsg'])
const sendFun = () => {
    emits('sendMsg', '我是子组件数据')
}
</script>

attrs和listeners

子组件运用$attrs能够取得父组件除了props传递的特点和特性绑定特点 (class和 style)之外的一切特点。

子组件运用$listeners能够取得父组件(不含.native润饰器的)一切v-on事情监听器，在Vue3中现已不再运用；可是Vue3中的attrs不仅能够取得父组件传来的特点也能够取得父组件v-on事情监听器

• 选项式API

//父组件
<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data(){
    return {
      msg1:'子组件msg1',
      msg2:'子组件msg2'
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件办法被调用,取得子组件传值：${val}`)
    }
  }
}
</script>
//子组件
<template>
  <div>
    <button @click="getParentFun">调用父组件办法</button>
  </div>
</template>
<script>
export default {
  methods:{
    getParentFun(){
      this.$listeners.parentFun('我是子组件数据')
    }
  },
  created(){
    //获取父组件中一切绑定特点
    console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    //获取父组件中一切绑定办法    
    console.log(this.$listeners) //{parentFun:f}
  }
}
</script>

• 组合式API

//父组件
<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent,ref } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    const parentFun = (val) => {
      console.log(`父组件办法被调用,取得子组件传值：${val}`)
    }
    return {
      parentFun,
      msg1,
      msg2
    };
  },
});
</script>
//子组件
<template>
    <div>
        <button @click="getParentFun">调用父组件办法</button>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        //获取父组件办法和事情
        console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
        const getParentFun = () => {
            //调用父组件办法
            ctx.attrs.onParentFun('我是子组件数据')
        }
        return {
            getParentFun
        };
    },
});
</script>

• setup语法糖

//父组件
<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
  console.log(`父组件办法被调用,取得子组件传值：${val}`)
}
</script>
//子组件
<template>
    <div>
        <button @click="getParentFun">调用父组件办法</button>
    </div>
</template>
<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs()
//获取父组件办法和事情
console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
    //调用父组件办法
    attrs.onParentFun('我是子组件数据')
}
</script>

留意

Vue3中运用attrs调用父组件办法时，办法前需求加上on；如parentFun->onParentFun

provide/inject

provide：是一个目标，或者是一个返回目标的函数。里面包括要给子孙子孙特点

inject：一个字符串数组，或者是一个目标。获取父组件或更高层次的组件provide的值，既在任何子孙组件都能够经过inject取得

• 选项式API

//父组件
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg1: '子组件msg1',
      msg2: '子组件msg2'
    }
  },
  provide() {
    return {
      msg1: this.msg1,
      msg2: this.msg2
    }
  }
}
</script>
//子组件
<script>
export default {
  inject:['msg1','msg2'],
  created(){
    //获取高层级提供的特点
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }
}
</script>

• 组合式API

//父组件
<script>
import Child from './Child'
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    provide("msg1", msg1)
    provide("msg2", msg2)
    return {
    }
  },
});
</script>
//子组件
<template>
    <div>
        <button @click="getParentFun">调用父组件办法</button>
    </div>
</template>
<script>
import { inject, defineComponent } from "vue";
export default defineComponent({
    setup() {
        console.log(inject('msg1').value) //子组件msg1
        console.log(inject('msg2').value) //子组件msg2
    },
});
</script>

• setup语法糖

//父组件
<script setup>
import Child from './Child'
import { ref,provide } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1",msg1)
provide("msg2",msg2)
</script>
//子组件
<script setup>
import { inject } from "vue";
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
</script>

说明

provide/inject一般在深层组件嵌套中运用适宜。一般在组件开发中用的居多。

parent/children

$parent: 子组件获取父组件Vue实例，能够获取父组件的特点办法等

$children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不确保子组件的顺序

• Vue2

import Child from './Child'
export default {
  components: {
    Child
  },
  created(){
    console.log(this.$children) //[Child实例]
    console.log(this.$parent)//父组件实例
  }
}

留意
父组件获取到的$children并不是呼应式的

expose&ref

$refs能够直接获取元素特点，同时也能够直接获取子组件实例

• 选项式API

//父组件
<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  mounted(){
    //获取子组件特点
    console.log(this.$refs.child.msg) //子组件元素
    //调用子组件办法
    this.$refs.child.childFun('父组件信息')
  }
}
</script>
//子组件 
<template>
  <div>
    <div></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    childFun(val){
      console.log(`子组件办法被调用,值${val}`)
    }
  }
}
</script>

• 组合式API

//父组件
<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const child = ref() //留意命名需求和template中ref对应
    onMounted(() => {
      //获取子组件特点
      console.log(child.value.msg) //子组件元素
      //调用子组件办法
      child.value.childFun('父组件信息')
    })
    return {
      child //必须return出去 否则获取不到实例
    }
  },
});
</script>
//子组件
<template>
    <div>
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const msg = ref('子组件元素')
        const childFun = (val) => {
            console.log(`子组件办法被调用,值${val}`)
        }
        return {
            msg,
            childFun
        }
    },
});
</script>

• setup语法糖

//父组件
<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref, onMounted } from "vue";
const child = ref() //留意命名需求和template中ref对应
onMounted(() => {
  //获取子组件特点
  console.log(child.value.msg) //子组件元素
  //调用子组件办法
  child.value.childFun('父组件信息')
})
</script>
//子组件
<template>
    <div>
    </div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
const msg = ref('子组件元素')
const childFun = (val) => {
    console.log(`子组件办法被调用,值${val}`)
}
//必须露出出去父组件才会获取到
defineExpose({
    childFun,
    msg
})
</script>

留意

经过ref获取子组件实例必须在页面挂载完成后才干获取。

在运用setup语法糖时分，子组件必须元素或办法露出出去父组件才干获取到

EventBus/mitt

兄弟组件通讯能够经过一个事情中心EventBus完成，既新建一个Vue实例来进行事情的监听，触发和毁掉。

在Vue3中没有了EventBus兄弟组件通讯，可是现在有了一个代替的计划mitt.js，原理仍是 EventBus

• 选项式API

//组件1
<template>
  <div>
    <button @click="sendMsg">传值</button>
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    sendMsg(){
      Bus.$emit('sendMsg','兄弟的值')
    }
  }
}
</script>
//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  created(){
   Bus.$on('sendMsg',(val)=>{
    console.log(val);//兄弟的值
   })
  }
}
</script>
//bus.js
import Vue from "vue"
export default new Vue()

• 组合式API

首要装置mitt

npm i mitt -S

然后像Vue2中bus.js一样新建mitt.js文件

mitt.js

import mitt from 'mitt'
const Mitt = mitt()
export default Mitt

//组件1
<template>
     <button @click="sendMsg">传值</button>
</template>
<script>
import { defineComponent } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
    setup() {
        const sendMsg = () => {
            Mitt.emit('sendMsg','兄弟的值')
        }
        return {
           sendMsg
        }
    },
});
</script>
//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script>
import { defineComponent, onUnmounted } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
  setup() {
    const getMsg = (val) => {
      console.log(val);//兄弟的值
    }
    Mitt.on('sendMsg', getMsg)
    onUnmounted(() => {
      //组件毁掉 移除监听
      Mitt.off('sendMsg', getMsg)
    })
  },
});
</script>

• setup语法糖

//组件1
<template>
    <button @click="sendMsg">传值</button>
</template>
<script setup>
import Mitt from './mitt.js'
const sendMsg = () => {
    Mitt.emit('sendMsg', '兄弟的值')
}
</script>
//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import Mitt from './mitt.js'
const getMsg = (val) => {
  console.log(val);//兄弟的值
}
Mitt.on('sendMsg', getMsg)
onUnmounted(() => {
  //组件毁掉 移除监听
  Mitt.off('sendMsg', getMsg)
})
</script>

写在最后

其实组件还能够凭借Vuex或者Pinia状态管理工具进行通讯(可是组件之间的通讯一般不主张这样做,因为这样就会呈现组件不能复用的问题)。对于Vuex和Pinia的用法我们能够参阅这篇文章一文解析Pinia和Vuex

假如感觉这篇文章对你有帮助的话,点赞收藏吧!