Связь между двумя компонентами (не связана с дочерним родителем) - PullRequest
Новая
       24

Связь между двумя компонентами (не связана с дочерним родителем)

0 голосов
/ 13 февраля 2019

компонент 1 

 getMyProfile(){    
       this.$root.$emit('event');
           console.log("emited")
     },

компонент 2 

mounted() {
    this.$root.$on('event', () = {
    alert("Fired");
 }
}

Я пытаюсь предупредить «запуск» компонента 2 из компонента1. Но этого не происходит.что я делаю не такДолжен ли я добавить что-то на основной JS?

Ответы [ 4 ]

0 голосов
/ 13 февраля 2019

Кроме небольшой опечатки в вашем $on, неясно, что вы делаете неправильно, поскольку вы не предоставили достаточно контекста, но вот рабочий пример того, что вы пытаетесь сделать (отправить иполучить событие через элемент $root без создания отдельного экземпляра Vue EventBus).(Многие люди предпочитают передавать сообщения через отдельный экземпляр, но функционально это похоже на $root.)

Я включил объект полезной нагрузки, чтобы продемонстрировать передачу информации вместе с событием. 

Vue.component('sender', {
  template: '<span><button @click="send">Sender</button></span>',
  methods: {
    send() {
      console.log("Sending...")
      this.$root.$emit('eventName', {
        message: "This is a message object sent with the event"
      })
    }
  }
})

Vue.component('receiver', {
  template: '<span>Receiver component {{message}}</span>',
  data() {return {message: ''}},
  mounted() {
    this.$root.$on('eventName', (payload) => {
      console.log("Received message", payload)
      this.message = payload.message
    })
  }
})

new Vue({
  el: '#app'
});
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <sender></sender>
  <receiver></receiver>
</div>

Лично я не склонен часто использовать этот паттерн;Я считаю, что лучше обрабатывать межкомпонентную связь от родителя к потомку как подпорки, а от потомка к родителю - как прямые $emit s (не на $root).Когда я обнаруживаю, что мне нужно общение между братьями и сестрами, это, как правило, признак того, что я сделал несколько неудачных архитектурных решений или что мое приложение стало достаточно большим, чтобы я мог переключиться на vuex.Сбор всех сообщений о событиях в едином месте, будь то $root или экземпляр Eventbus, имеет тенденцию усложнять приложение для анализа и отладки.

По крайней мере, вы должны быть очень явными в названии ваших событий, чтобы легче было понять, откуда они берутся;имена событий, такие как «handleClick» или просто «event», быстро становятся таинственными неизвестными.

0 голосов
/ 13 февраля 2019

Итак, вы ищете шину событий (глобальные события)

Я бы посоветовал рассмотреть возможность использования vuex в любое время, когда вам нужно реализовать шину событий.

Давайте вернемсяк проблеме.

Создайте файл event-bus.js, это то, что будет захватывать и распространять события.

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

Теперь в вашей main.js зарегистрируйте свою шину событий 

import Vue from 'vue'
import eventBus from './event-bus'
//other imports

Vue.prototype.$eventBus = eventBus

new Vue({
   ...
}).$mount('#app')

Теперь вы можете:

  • прослушивать события с помощью this.$eventBus.$on(eventName)
  • испускать события this.$eventBus.$emit(eventName)
0 голосов
/ 13 февраля 2019

В этом примере я перенесу событие из дочернего в родительский компонент с $ emit

Дочерний компонент: 

Vue.component('Child component ', {
    methods: {
        getMyProfile: function() {
            this.$emit('me-event', 'YUP!')
        }
    },
    template: `
        <button v-on:click="getMyProfile">
            Emmit Event to Parrent
        </button>
    `
})

Родительский компонент: 

Vue.component('Parent component ', {
    methods: {
      getEventFromChild: function(event) {
        alert(event)
      }
    }
    template: `
        <div>
          <Child-component v-on:me-event="getEventFromChild" />
        </div>
    `
})

дляНапример, когда у вас есть поток данных в одну сторону от родителя к потомку, и вы хотите передать данные от потомка к родителю, вы можете использовать $ emit и перенести их от потомка ... а в родительском элементе вы должны перехватить его с помощью директивы v-on.(извините, мой английский)

0 голосов
/ 13 февраля 2019

Если компонент 2 является родительским для компонента 1, вы можете сделать: 

getMyProfile(){    
       this.$emit('myevent');
           console.log("emited")
     },

для компонента 2, такого как 

<componant-2 @myevent="dosomething" ...></componant-2>

и во втором компоненте 

methods: {
  dosomething() {
    console.log('Event Received');
   }
}
...