目录

一，自定义事件

1 绑定事件 

2 @ 或 v-on  

3 代码展示 小案例

 二，全局事件总线

1 安装

2 组件的使用

三，订阅与发布

1，含义

2，安装 pubsub：npm i pubsub-js

3，发布消息 接收消息 取消订阅 将由下列代码展示

---

一，自定义事件

1 绑定事件 

定义：子给父传递数据：通父组件给子组件绑定自定义事件

简单来讲就是：子组件通过自定义事件给父组件传递数据

2 @ 或 v-on  

3 代码展示 小案例

下面是父组件中的代码块

 
<script>
	import Person from './components/Person.vue';
	export default {
		name: 'app',
		data() {
			return {
				title: 'web2209',
				msg: '自定义事件'
			}
		},
		components: {
			Person
		},
		methods:{
			showName(name){//这个参数是子组件传的值
				console.log("App得到了姓名",name);
			}
		}
	}
script>
 
<style>
 
style>

接下来是子组件的代码块

 
<script>
	export default {
		name: 'Person',
		data() {
			return {
				name: '张三',
				age: 19
			}
		},
		methods: {//调用父组件中的自定义事件
			sendName() {
				this.$emit('getName',this.name)
			}
		},
	}
script>
 
<style>
style>

效果图

 二，全局事件总线

作用： 一种组件间通信的方式 适用于任意组件间通信。

1 安装

安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。

new Vue({
  render: h => h(App),
  //给VM添加$bus
  beforeCreate() {
  	Vue.prototype.$bus = this
  }
}).$mount('#app')

2 组件的使用

给全局事件总线，绑定自定义事件getName 谁需要接收数据就再谁绑定。

子组件①：LiSi中

 
<script>
	export default{
		name:'LiSi',
		data(){
			return{
				name:'李四',
				age: 20
			}
			
		},
		methods:{
			sendName(){
				this.$bus.$emit("getName",this.name)
			}
		},
		mounted() {
			this.$bus.$on("getAge",(age)=>{
				console.log("李四组件得到的age:",age);
			})
		}
	}
script>
 
<style>
style>

子组件②：ZhangSan中   

注意：组件销毁之前卸载自定义事件

 
<script>
 
	export default{
		name:'ZhangSan',
		data(){
			return{
				name:'张三',
				age: 19
			}
			
		},
		mounted() {
			this.$bus.$on('getName',(name)=>{
				console.log("张三组件得到的name:",name);
			})
		},
		methods:{
			sendAge(){
				this.$bus.$emit("getAge",this.age)
			},
			estroyGetName(){
				this.$destroy();
			}
		},
		beforeDestroy() {
			// console.log('正在销毁中.....');
			this.$bus.$off();//销毁全部组件
			// this.$bus.$off("getName");//销毁getName
			// this.$bus.$off("getAge");//销毁getAge
		}
		
	}
script>
 
<style>
style>

父组件中的代码块为