Vue2.0 entre los componentes de la expedición y recepción de eventos

En el desarrollo de vue, a menudo comunicar eventos entre los dos componentes

En vue1.0 usamos $ $ expedición y difusión

child.vue:

this.$dispatch('eventName',this.data);

parent.vue:

event:{
    'eventName':function(data) {
        // 执行的方法
    }
}

Pero en vue2.0 $ expedición y $ emisión fue abandonado, porque se basa en el evento transmitido en árbol de componentes es realmente difícil de entender, y en el proceso de expansión de la estructura componente será cada vez más frágil, y sólo Sons adaptado para comunicar entre los componentes. Las recomendaciones más fáciles de actualización ofrecidos por el funcionario es el uso de un conjunto de controladores de eventos, sino que también ilustra claramente un ejemplo de vue vacío se puede hacer, porque el ejemplo implementa una interfaz Vue evento para distribuir
antes de la inicialización vue vue2.0 , agregar un nombre a los datos como objetos eventhub vue vacía

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

eventos de llamada dentro de un determinado conjunto de gatillo

this.$root.eventHub.$emit('eventName', event.target);

evento de llamada se recibe dentro de otro componente, entonces el suceso de unión excepto cuando la destrucción de componentes, utilice $ off Método

created() {
    this.$root.eventHub.$on('eventName',(target) => {
    this.functionName(target)
  });
},
method:{
    functionName(target) {
    console.log(target);
    }
}

Este artículo se reproduce en: mono 2048➜ https://www.mk2048.com/blog/blog.php?id=hhbh0a2jiib

Supongo que te gusta

Origin www.cnblogs.com/baimeishaoxia/p/12563847.html
Recomendado
Clasificación