利用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根实例上
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()

Logo

前往低代码交流专区

更多推荐