全局事件总线消息订阅 $nextTick 过渡与动画

# 全局事件总线消息订阅 $nextTick 过渡与动画

# 全局事件总线

一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件

所有的组件对象都必须能看见他
这个对象必须能够使用$on``$emit``$off方法去绑定、触发和解绑事件

# 使用步骤

定义全局事件总线

new Vue({
 	...
 	beforeCreate() {
 		Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
 	},
  ...
})

1
2
3
4
5
6
7

使用事件总线

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

export default {
  methods(){
      demo(data){...}
  }
  ...
  mounted() {
      this.$bus.$on('xxx',this.demo)
  }
}

1
2
3
4
5
6
7
8
9

提供数据：this.$bus.$emit('xxx',data)
最好在beforeDestroy钩子中，用$off()去解绑当前组件所用到的事件 src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

兄弟组件1

<script>
export default {
  name: "School",
  data() {
    return {
      name: "佩奇",
      address: "北京",
    };
  },
  mounted() {  //
    // console.log('School',this)
    this.$bus.$on("hello", (data) => {
      console.log("我是School组件，收到了数据", data);
    });
  },
  beforeDestroy() {  //
    this.$bus.$off("hello");
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

兄弟组件2

<template>
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <button @click="sendStudentName">把名给School组件</button> //
  </div>
</template>

<script>
  export default {
    name:'Student',
    data() {
      return {
        name:'张三',
      }
    },
    methods: {  //
      sendStudentName(){
        this.$bus.$emit('demo', this.name)
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 消息的订阅与发布（基本不用）

消息订阅与发布（pubsub）消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信使用步骤

安装pubsub：npm i pubsub-js
引入：import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

export default {
    methods: {
        demo(msgName, data) {...}
    }
    ...
    mounted() {
			this.pid = pubsub.subscribe('xxx',this.demo)
    }
}

1
2
3
4
5
6
7
8
9

提供数据：pubsub.publish('xxx',data)
最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅

<script>
	import pubsub from 'pubsub-js'

	export default {
		name: 'School',
		data() {
			return {
				address:'北京',
			}
		},
		methods: {
			demo(msgName, data) {
				console.log('我是School组件，收到了数据：',msgName, data)
			}
		},
		mounted() {
			this.pubId = pubsub.subscribe('demo', this.demo) // 订阅消息
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId) // 取消订阅
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div class="student">
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
  import pubsub from 'pubsub-js'

  export default {
    name:'Student',
    data() {
      return {
        name:'JOJO',
        sex:'男',
      }
    },
    methods: {
      sendStudentName(){
        pubsub.publish('demo', this.name) // 发布消息
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# $nextTick

这是一个生命周期钩子
this.$nextTick(回调函数)在下一次DOM更新结束后执行其指定的回调
场景：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行比如隐藏的dom进行显示同时又操作了UI数据

this.$nextTick(function () {
  this.$refs.inputTitle.focus();
});

1
2
3

# 过渡与动画

使用<transition>包裹要过度的元素，并配置name属性，此时需要将上面样式名的v换为name
第三方动画库Animate.css

← 8.自定义事件 10.插槽 axios →