Vue.js通过道具亲子沟通和活动

你好，我是relativly新Vue.js和SOFAR我喜欢与它的工作，但今天我挣扎，我还没有找到我的问题一个干净的解决方案。

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

现在我只想在每个时间点显示一个上下文菜单。所以我在想我会向Parent.vue发出一个类似“menuIsShown”的事件，并在父级中向每个Child.vue分派一个事件来隐藏菜单。在一个菜单中，我可以简单地将其设置为可见。

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

但是当我了解到有在Vue2没有$派遣了。所以我试图在Parent.vue中使用this. $ children来触发每个Child.vue中的方法。不知何故，这不起作用，我想这个问题必须有更好的解决方案，因为你应该使用道具来传达给孩子们。但是这对于我来说在for循环中似乎很难。要使用全局事件总线也是可能的，但这真的有必要吗？

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

在此先感谢 ROBI

来源

2017-02-16 Robi_h

想要触发其他子组件的点击事件时隐藏其他子组件？ –

仅限每个孩子的上下文菜单，以确保每个时间点只显示一个上下文菜单 –

Vue公司有one way data flow，这样的数据可以从父通过道具传递给孩子。您可以发出从子事件于母公司作为记录here

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

来源

2017-02-16 13:31:49 Saurabh

在父：

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

在儿童中：

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

来源

2017-02-16 13:32:43 Potray

我会建议你使用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时，我必须做我自己这样的事情。事件总线适用于这样的情况：使用状态可能会过度，每个组件发出的数据可能会导致混乱。

来源

2017-02-16 13:54:07

谢谢大家的帮助。我最终为每个孩子都调用了一个方法。我认为这是对我来说最合乎逻辑的方式（我知道有几种方法）。访问孩子不是很方便，因为我在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(); 

     } 


     } 




    },

来源

2017-02-16 14:53:11

Vue.js通过道具亲子沟通和活动

回答

相关问题