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通過道具親子溝通和活動

回答

相關問題