Directorio de artículos
1. Autobús de eventos
1. Introducción
EventBus también se denomina bus de eventos. En Vue, EventBus se puede utilizar como un concepto de puente de comunicación. Es como si todos los componentes compartieran el mismo centro de eventos. Puede registrarse para enviar o recibir eventos al centro, de modo que los componentes puedan notificar a otros componentes en paralelo hacia arriba y hacia abajo, pero eso también es conveniente, por lo que si se usa descuidadamente provocará desastres que son difíciles de mantener, por lo que se necesita un Vuex más completo como centro de gestión estatal para elevar el concepto de notificaciones al nivel estatal compartido.
2. Cómo utilizar EventBus
1. Inicialización
Lo primero que debes hacer es crear el bus de eventos y exportarlo para que otros módulos puedan usarlo o escucharlo. Podemos manejar esto de dos maneras.
- Método 1: cree un nuevo archivo .js, como event-bus.js. Todo lo que necesita hacer es introducir Vue y exportar una instancia del mismo (en este caso, lo llamo EventBus). En esencia es un componente que no tiene DOM, lo único que tiene es su método de instancia, por lo que es muy liviano.
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
- Método 2: puede inicializar EventBus directamente en main.js en el proyecto
这种方式初始化的 EventBus 是一个 全局的事件总线
// main.js
Vue.prototype.$EventBus = new Vue()
// 使用时为：
this.$bus.$emit('nameOfEvent',{
... pass some event data ...});
2. Enviar evento
EventBus.$emit(canal: cadena, devolución de llamada(carga útil1,…))
EventBus.$emit("decreased", {
num:this.num,deg:this.deg});
3. Recibir eventos
EventBus.$on(channel: string, callback(payload1,…))
solo escucha una vez: EventBus.$once(channel: string, callback(payload1,…))
data() {
return {
degValue:0,
fontCount:0,
backCount:0
};
},
mounted() {
EventBus.$on("decreased", ({
num,deg}) => {
this.fontCount -= num
this.$nextTick(()=>{
this.backCount -= num
this.degValue -= deg;
})
});
}
4. Eliminar el detector de eventos
EventBus.$off('decreased',{})
Puede utilizar EventBus.$off('decreased') para eliminar todos los oyentes de este evento en la aplicación. O llame a EventBus.$off() directamente para eliminar todos los canales de eventos. Tenga en cuenta que no es necesario agregar ningún parámetro.
2. Método $nextTick
Ejecute la devolución de llamada retrasada después del siguiente ciclo de actualización de DOM. Utilice este método inmediatamente después de modificar los datos para obtener el DOM actualizado.
Se utiliza para resolver problemas asincrónicos, como cuando la inicialización del carrusel en swiper se realiza al mismo tiempo que la solicitud: la representación del carrusel debe escribirse en la declaración de ejecución después de que la solicitud sea exitosa, y el método $ nextTick debe escribirse en la declaración de ejecución ser usado.
// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
this.$nextTick(() => {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})