超详细的vue组件间通信总结(2)

<template> <div> <son1></son1> <son2></son2> </div> </template> <script> import son1 from './son1.vue' import son2 from './son2.vue' export default { name: 'parent', components: { son1, son2 }, created(){ this.$bus.$on('busEvent',(v)=>{ console.log(v); }) }, beforeDestroy(){ this.$bus.off('busEvent') } } </script>

son1和son2中的mounted:

son1:mounted(){ this.$bus.$emit('busEvent','son1哈哈') }son2:mounted(){ this.$bus.$emit('busEvent', 'son2嘻嘻')}

打印结果：

使用eventBus有三点需要注意，1.$bus.on应该在created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件；

　　　　　　　　　　　　　　 2.$bus.emit应该在mounted中使用，等待created中的$bus.on事件绑定完成；

　　　　　　　　　　　　　　 3.发布订阅的事件在beforeDestory钩子里需要使用$bus.off解除，组件销毁后没必要一直监听。

六、vuex

借助vuex的状态管理来实现组件通信，vuex适用于较为复杂的项目，频繁的数据共享且数据量比较大。

store/index.js:

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { isLogin: false }, mutations: { loginState (state, isLogin) { state.isLogin = isLogin } } }) export default store

App.vue:

created(){ this.$store.commit('loginState',true)// 设置登录状态为true },

son.vue:

<template> <div>我是儿子：<input type="button" value="儿子" />登录状态:{{isLogin}}</div> </template> <script> import {mapState} from 'vuex'; export default { name: "son", computed:{ ...mapState(['isLogin']) } }; </script>

七、localstorage

localstorage是浏览器的本地存储，将会长期存储在浏览器中，非常庞大的数据不建议用此方式。

App.vue

created(){ localStorage.setItem('isLogin', true) },

son.vue:

computed:{ isLogin(){ return localStorage.getItem('isLogin') } }

常见的组件通信方式基本就是这些啦，有什么遗漏或不足的，欢迎评论区留言！

总结

到此这篇关于vue组件间通信的文章就介绍到这了,更多相关vue组件间通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: