Vue.js通过道具和活动进行家长儿童交流

Question

你好，我是Vue.js的新手，我喜欢和它一起工作但是今天我很挣扎，我找不到一个干净的解决方案来解决我的问题。

我有9个Child.vue组件，我在v-for循环中创建，每个Child.vue包含一个ContextMenu.vue组件。如果我单击Child.vue中的按钮，则触发此上下文菜单。一切都很好用。

现在我想只在每个时间点显示一个上下文菜单。所以我在想我向Parent.vue发出一个类似于＆＃34; menuIsShown＆＃34;并在父节点中向每个Child.vue发送一个事件来隐藏菜单。在一个菜单中，我可以简单地将其设置为可见。

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

但是据我所知，Vue2中没有$ dispatch了。所以我尝试使用这个。在Parent.vue中的$ children来触发每个Child.vue中的方法。不知怎的，这也不起作用，我想必须有一个更好的解决方案来解决这个问题，因为你应该使用道具与孩子沟通。但在for循环中，这对我来说似乎很难。也可以使用全局事件总线，但这是否真的有必要？

任何最佳实践建议如何解决这个问题？

提前致谢 ROBI

Answer 1

Vue有one way data flow，因此可以通过道具将数据从父级传递给子级。您可以按照记录的here

从子项发送事件到父项

但是考虑到你有很多子组件，我建议你使用一个中央状态机，vuex就是一个很好的例子，在社区中很受欢迎。

Answer 2

我建议您使用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。事件总线用于这样的事情，即使用状态可能过度杀伤并从每个组件发出可能使其变得混乱。

Answer 3

谢谢大家的帮助。我最后给每个孩子打了一个方法。 我认为这对我来说是最合乎逻辑的方式（我知道有几种方法）。访问孩子不是很方便，因为我用2 nestet v-for循环生成它们。访问不是很优雅，但它正在运作。

 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();

      }


      }




  },

Answer 4

在父母：

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

儿童：

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