Как создать хук с событиями между компонентами VUE 2.0

Я создал два динамических компонента. Теперь, используя события: $emit/$on мне нужно для запуска метода "logThat(someObj)" компонента-два, передающего аргументы, как вы можете видеть в этой скрипте:

Vue.component('component-one', {
    template: '#template-a',
    methods: {
        onClick() {
            const someObj = {
                foo: "foo",
                bar: "bar"
            }

            vm.$emit('selected', someObj)
            vm.currentView ='component-two';
        }
    }
});

//Any hint??
/*vm.$on('selected', (someObj) => {
    this.logThat(someObj)
})*/

Vue.component('component-two', {
    template: '#template-b',
    methods: {
        onClick() {
            vm.currentView ='component-one';
        },
        logThat(someObj) {
            console.log(someObj);
       }
    }
});

https://jsfiddle.net/wanxe/yuh71e1o/

Если у кого-то есть какие-либо предложения о том, как справиться с этим, это будет оценено :)


javascript vue.js vue-component
person jnieto    schedule 02.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Технически вы должны использовать общение между родителем и ребенком как указано в документах.

Но в вашем текущем примере это не сработает. Причина: ваши компоненты «один» и «два» создаются и уничтожаются, когда вы перемещаетесь вперед и назад.

Вот ваш обновленный jsFiddle: https://jsfiddle.net/mani04/yuh71e1o/4/. Вот изменения:

Автобус событий:

var bus = new Vue();

Отправка события из компонента-один:

bus.$emit('selected', someObj);

Получение события во втором компоненте:

created: function() {
   console.log("Created component-two, listening for 'selected' event");
   bus.$on('selected', this.logThat);
}

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

Чтобы преодолеть это, вам нужно отойти от динамических компонентов и одновременно создать component-one и component-two в корневом шаблоне. Вы можете отображать/скрывать в зависимости от того, какой вид вы хотите, используя v-show (не v-if, который снова уничтожает экземпляр компонента). Затем вы можете использовать шину событий для связи, как подробно описано в разделе документы по общению родителей и детей.

person Mani    schedule 02.11.2016
comment
Во-первых, большое спасибо за то, что помогли мне лучше понять динамические компоненты. Как я вижу в вашем примере, когда компонент два срабатывает в первый раз, он только создается, но не запускается событие «выбрано». Однако во второй раз я получаю ожидаемый результат. Понятно, что мне нужно использовать статические компоненты и использовать v-show для переключения, как вы мне говорите. Но если у вас есть переменная ShowMe, где я объявлю? В экземпляре vue в каждом из компонентов оба? - person jnieto; 02.11.2016
comment
Если вы щелкнете в третий или четвертый раз, вы заметите более интересные результаты в исходной скрипке — старая component-two никогда не уничтожается. Вместо этого он каждый раз создается заново, что приводит к непредсказуемым результатам. Вот обновленная скрипта: jsfiddle.net/mani04/yuh71e1o/5. Я использовал v-show для отображения/скрытия компонентов вместо динамического переключения между ними. Здесь вы найдете ожидаемые результаты. - person Mani; 02.11.2016
comment
Большой!! Спасибо еще раз! - person jnieto; 02.11.2016