Vue.js Родитель Ребенок связь через реквизита и События

Question

Здравствуйте, я relativly новичок Vue.js и ГНФАР мне нравится работать с ним, но сегодня я изо всех сил, и я не нашел чистое решение для моей проблемы ,

У меня есть 9 компонентов Child.vue, которые я создаю в цикле v-for, каждый Child.vue включает компонент ContextMenu.vue. Если я нажму кнопку в Child.vue, я вызову это контекстное меню. Все работает хорошо.

Теперь я хочу, чтобы в каждый момент времени отображалось только одно контекстное меню. Поэтому я думал, что я выбрал событие для Parent.vue, что-то вроде «menuIsShown», и отправьте родительскому событию каждому Child.vue, чтобы скрыть это меню. В одном меню я мог просто установить его на видимое.

this.$emit('contextMenuShown', true); 
this.showMenu(); 

Но, поскольку я узнал, что в Vue2 больше нет отправки $. Поэтому я попытался использовать этот. $ Children в Parent.vue, чтобы вызвать метод в каждом Child.vue. Как-то это не сработало, и я думаю, должно быть лучшее решение этой проблемы, так как вы должны использовать реквизиты для общения с детьми. Но мне это кажется очень трудным в цикле for. Также возможно использование глобальной шины событий, но действительно ли это необходимо?

Рекомендации по наилучшей практике, как решить эту проблему?

Спасибо заранее Роби

Answer 1

Вью имеют one way data flow, поэтому данные могут передаваться от родителей к ребенку через реквизита. Вы можете испускать события от ребенка к родительскому задокументированному here

Но, учитывая, что у вас много дочерних компонентов, я рекомендую использовать центральный конечный автомат, а vuex - прекрасный пример этого, который довольно популярен и в сообщества.

Answer 2

В родителю:

this.$children[index].$emit('contextMenuShown', true); 

У детей:

mounted() { 
    this.$on('contextMenuShown', function() { 
     // Do stuff 
    }); 
} 

Answer 3

Я предлагаю вам использовать vue-clickaway. Этот проект предназначен для этого конкретного случая, когда вы хотите прослушивать клики вне компонента.

Использование довольно просто

import { mixin as clickaway } from 'vue-clickaway'; 

export default { 
    mixins: [ clickaway ], 
    template: '<p v-on-clickaway="away">Click away</p>', 
    methods: { 
     away: function() { 
     console.log('clicked away'); 
    }, 
    }, 
}; 

я использовал eventbus, когда я должен был сделать такую ​​вещь сама по себе. Eventbus предназначен для таких вещей, где использование состояния может быть чрезмерным, и излучение от каждого компонента может привести к беспорядку.

Answer 4

Благодарим всех вас за помощь. В конце концов я назвал метод для каждого ребенка. Я думаю, что это самый логичный способ для меня (я знаю, что есть несколько способов). Доступ к детям не очень удобен, потому что я сгенерировал их в двух циклах vest for nestet. Не очень элегантный доступ, но он работает.

var rows = this.$children[0].$children 
     for(var j = 0;j<rows.length;j++){ 
     var row = rows[j].$children; 
     for(var i = 0; i<row.length;i++){ 
     row[i].hideMenu(); 

     } 


     } 




    },