vue学习

消息的订阅与发布：

在实现这一功能的时候主要分为两大部分：1.订阅消息2.发布消息。

.使用步骤：

1. 安装pubsub：npm i pubsub-js

2. 引入: import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }

4. 提供数据：pubsub.publish('xxx',数据)

5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

6. 例子：

 Student.vue代码：发送信息

<template>
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <!-- 实现兄弟间的通信 -->
    <button @click="sendStudentname">把学生名交给School组件</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  methods: {
    sendStudentname(){
    // this.$bus.$emit('hello',this.name)
    //第一个参数是消息名，第二个是消息内容
    pubsub.publish('hello',this.name)
    }
  },
  		mounted() {
			// console.log('Student',this.x)
		},
};
</script>

<style lang="less" scoped>

School.vue:接收数据

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		//第二种写法
		// methods: {
		// 	demo(msgname,data){
		// 	console.log('有人发布了hello消息，hello消息的回调执行了',msgname,data);
		// 	}
		// },
		mounted() {
		//$on,$off,$emit都在vue的原型对象中
			// console.log('School',this.$on)
			// this.$bus.$on('hello',(data)=>{
			// console.log('我是School组件：收到了数据',data);
			// })
			//第一个参数是订阅消息的一个名称，第二个是要执行的回调
			//回调函数里第一个参数返回的是消息名称，第二个参数返回的是消息内容
			this.pubId=pubsub.subscribe('hello',(msgname,data)=>{
			console.log(this);//如果不用箭头函数则this是undefined,因为引入的是第三方库，用了箭头函数,则this为：vc
			console.log('有人发布了hello消息，hello消息的回调执行了',msgname,data);
			alert('有人发布了hello消息，hello消息的回调执行了!'+msgname+data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style scoped>

注意：在pubsub.subscribe如果不用箭头函数则this是undefined,因为引入的是第三方库，用了箭头函数,则this为：vc