基础组件之间传值,可以查看博主文章:1.Vue组件之间传值问题
如果在项目中,组件与组件之间,并不是通过Vue.component('component-a',{...})这么简单来编写的。所以在使用父子间,兄弟间传值问题上,如何使用Bus总线来传值呢?
项目中使用的组件是如下图所示样式
而不是下图这种的最基础写法。下图基础写法只用于初期学习
=======================================================================
在项目中,那么如何使用Bus总线来完成在父子、兄弟间的传值问题呢?
利用new来创建一个新的vue实例,可以轻松实现组件之间数据通信
方法1 新创建一个Bus的js模块
// Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件Com1
import Bus from './Bus'
export default {
data() {
return {
val: 0
}
},
methods: {
changeVal(){
this.val += 10;
Bus.$emit('val', this.val)
}
},
}
// 组件Com2
import Bus from './Bus'
export default {
data() {
return {
val: 0
}
},
mounted () {
Bus.$on('val', data => {
this.val = data;
});
}
}
// 点击组件1,就可以改变组件2中的值。
方法2 创建一个$bus 原型
//Vue每个组件都是基于Vue原型的。所以创建一个$bus原型,就是给每个组件创建。每个组件都可以通过
//this.$bus 的方式访问
Vue.prototype.$bus = new Vue();
方法3 直接将Bus对象挂载到Vue根实例上
import Vue from 'vue'
const Bus = new Vue()
const app= new Vue({
el:'#app',
data:{
Bus
}
router,
store
});
// 组件中使用
this.$root.Bus.$on()
this.$root.Bus.$emit()
方法2实例
仅以此来记录在学习Vue过程中,遇到的一些基础问题,简单笔记,供自己查看,也供初学者参考。
附:Vue篇目录:
3.Vue.js 实战 调查问卷WebApp项目 4.vue-cli + webpack搭建Vue开发环境
5. Vue简单问题汇总(持续更新...) 6.Vue组件之间数据通信之Bus总线
7.Vue-Router导航钩子(附Demo实例) 8.ES6箭头函数与普通函数的区别
9.Vuex的使用 10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数
11.组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题
12.Vuex命名空间namespaced 13.Vue axios的使用
---->如有疑问,请发表评论,或者联系博主:lzb348110175@163.com,欢迎哦^_^