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

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

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

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


相关文章
|
6天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
10天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
10天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
7 0
|
10天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
11 0
|
10天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
57 0
|
10天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
22 0
|
10天前
|
JavaScript
【vue】 分享一个vue2 登录页 复制直接用
【vue】 分享一个vue2 登录页 复制直接用
8 0
|
1天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。