vue组件通讯之总线Bus

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_35958891/article/details/101177291

实现效果和目录结构

About.vue中

<template>
	<div>
		<e-form />
		<e-table />
	</div>
</template>

<script>
	import eForm from './module/form.vue'
	import eTable from './module/table.vue'
	export default {
		components:{ eForm, eTable}
	}
</script>

model/bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

model/form.vue

<template>
	<div style="background: pink;">
		form组件中{{total}}
	</div>
</template>

<script>
	import Bus from './bus.js'
	export default{
		data() {
			return {
				total:0
			}
		},
		created(){
			Bus.$on('total', val => {
				this.total = val
			})
		}
	}
</script>

model/table.vue

<template>
	<div style="display:flex;background: green;">
		table组件中<el-input v-model="total"></el-input>
	</div>
</template>

<script>
	import Bus from './bus.js'
	export default{
		data() {
			return {
				total:0
			}
		},
		watch: {
			total(val){
				Bus.$emit('total',val)
			}
		},
		//在离开当前页面前要注销掉，要不然会出现很严重的bug
		beforeDestory(){
			Bus.$emit('total')
		}
	}
</script>