Vue.js

Question

içinde ana bileşenden çocuk yöntemi yürütme Şu anda, diğer bileşenlerin bir listesini içeren bir Vue.js bileşenlerine sahibim. Bilişim ile çalışmanın ortak yolunun veriyi çocuklara aktardığını ve çocuklardan ebeveynlere olayları yaydığını biliyorum.

Ancak, bu durumda, ana numaralı düğmedeki bir düğmeye tıklandığında, çocuk bileşenlerinde bir yöntem yürütmek istiyorum. Bunu yapmanın en iyi yolu hangisi olurdu?

Answer 1

Önerilen yöntemlerden biri global event hub kullanmaktır. Bu, göbeğe erişimi olan herhangi bir bileşen arasındaki iletişimi sağlar.

Burada, olay nesnesinin bir alt bileşen üzerindeki bir yöntemi nasıl tetikleyebileceğini gösteren bir örnek verilmiştir. Bu şekilde çocuk bileşeni yöntemini

getChild(name) { 
    for(let child of this.$children) if (child.$options.name==name) return child; 
}, 

Ve diyoruz:

var eventHub = new Vue(); 
 

 
Vue.component('child-component', { 
 
    template: "<div>The 'clicked' event has been fired {{count}} times</div>", 
 
    data: function() { 
 
    return { 
 
     count: 0 
 
    }; 
 
    }, 
 
    methods: { 
 
    clickHandler: function() { 
 
     this.count++; 
 
    } 
 
    }, 
 
    created: function() { 
 
    // We listen for the event on the eventHub 
 
    eventHub.$on('clicked', this.clickHandler); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    clickEvent: function() { 
 
     // We emit the event on the event hub 
 
     eventHub.$emit('clicked'); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="app"> 
 
    <button @click="clickEvent">Click me to emit an event on the hub!</button> 
 
    <child-component></child-component> 
 
</div>

Answer 2

Sen ana bileşende yöntemlerde yardımcı yönteminin altında oluşturabilir

this.getChild('child-component-tag-name').childMethodName(arguments); 

I Vue için test etme> = 2.0