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

props

props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式

• 选项式API

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

• 组合式Api

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

• setup语法糖

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

注意

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

在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

emit

子组件可以通过emit发布一个事件并传递一些参数，父组件通过v-on进行这个事件的监听

• 选项式API

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

• 组合式Api

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

• setup语法糖

//父组件    import Child from './Child' const getFromChild = (val) => {  console.log(val) //我是子组件数据  } " _ue_custom_node_="true">//子组件   send import { defineEmits } from "vue"; const emits = defineEmits(['sendMsg']) const sendFun = () => {  emits('sendMsg', '我是子组件数据') } " _ue_custom_node_="true">

attrs和listeners

子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

• 选项式API

//父组件    import Child from './Child' export default {  components:{  Child  },  data(){  return {  msg1:'子组件msg1',  msg2:'子组件msg2'  }  },  methods: {  parentFun(val) {  console.log(`父组件方法被调用,获得子组件传值：${val}`)  }  } } " _ue_custom_node_="true">//子组件   调用父组件方法 export default {  methods:{  getParentFun(){  this.$listeners.parentFun('我是子组件数据')  }  },  created(){  //获取父组件中所有绑定属性  console.log(this.$attrs) //{"msg1": "子组件msg1","msg2": "子组件msg2"}  //获取父组件中所有绑定方法  console.log(this.$listeners) //{parentFun:f}  } } " _ue_custom_node_="true">

• 组合式API

//父组件    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  };  }, }); " _ue_custom_node_="true">//子组件   调用父组件方法 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  };  }, }); " _ue_custom_node_="true">

• setup语法糖

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

注意

Vue3中使用attrs调用父组件方法时，方法前需要加上on；如parentFun->onParentFun

provide/inject

provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性

inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得

• 选项式API

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

• 组合式API

//父组件 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 {   }  }, }); " _ue_custom_node_="true">//子组件   调用父组件方法 import { inject, defineComponent } from "vue"; export default defineComponent({  setup() {  console.log(inject('msg1').value) //子组件msg1  console.log(inject('msg2').value) //子组件msg2  }, }); " _ue_custom_node_="true">

• setup语法糖

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

说明

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