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

//父组件    import Child from './Child' export default {  components: {  Child  },  mounted(){  //获取子组件属性  console.log(this.$refs.child.msg) //子组件元素  //调用子组件方法  this.$refs.child.childFun('父组件信息')  } } " _ue_custom_node_="true">//子组件    export default {  data(){  return {  msg:'子组件元素'  }  },  methods:{  childFun(val){  console.log(`子组件方法被调用,值${val}`)  }  } } " _ue_custom_node_="true">

• 组合式API

//父组件    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出去 否则获取不到实例  }  }, }); " _ue_custom_node_="true">//子组件   import { defineComponent, ref } from "vue"; export default defineComponent({  setup() {  const msg = ref('子组件元素')  const childFun = (val) => {  console.log(`子组件方法被调用,值${val}`)  }  return {  msg,  childFun  }  }, }); " _ue_custom_node_="true">

• setup语法糖

//父组件    import Child from './Child' import { ref, onMounted } from "vue"; const child = ref() //注意命名需要和template中ref对应 onMounted(() => {  //获取子组件属性  console.log(child.value.msg) //子组件元素  //调用子组件方法  child.value.childFun('父组件信息') }) " _ue_custom_node_="true">//子组件   import { ref,defineExpose } from "vue"; const msg = ref('子组件元素') const childFun = (val) => {  console.log(`子组件方法被调用,值${val}`) } //必须暴露出去父组件才会获取到 defineExpose({  childFun,  msg }) " _ue_custom_node_="true">

注意

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

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

• 选项式API

//组件1   传值 import Bus from './bus.js' export default {  data(){  return {  msg:'子组件元素'  }  },  methods:{  sendMsg(){  Bus.$emit('sendMsg','兄弟的值')  }  } } " _ue_custom_node_="true">//组件2   组件2  import Bus from './bus.js' export default {  created(){  Bus.$on('sendMsg',(val)=>{  console.log(val);//兄弟的值  })  } } " _ue_custom_node_="true">//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  传值import { defineComponent } from "vue"; import Mitt from './mitt.js' export default defineComponent({  setup() {  const sendMsg = () => {  Mitt.emit('sendMsg','兄弟的值')  }  return {  sendMsg  }  }, }); " _ue_custom_node_="true">//组件2   组件2  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)  })  }, }); " _ue_custom_node_="true">

• setup语法糖

//组件1  传值import Mitt from './mitt.js' const sendMsg = () => {  Mitt.emit('sendMsg', '兄弟的值') } " _ue_custom_node_="true">//组件2   组件2  import { onUnmounted } from "vue"; import Mitt from './mitt.js' const getMsg = (val) => {  console.log(val);//兄弟的值 } Mitt.on('sendMsg', getMsg) onUnmounted(() => {  //组件销毁 移除监听  Mitt.off('sendMsg', getMsg) }) " _ue_custom_node_="true">

写在最后

其实组件还可以借助Vuex或者Pinia状态管理工具进行通信(但是组件之间的通信一般不建议这样做,因为这样就会出现组件不能复用的问题)。对于Vuex和Pinia的用法大家可以参考这篇文章一文解析Pinia和Vuex

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