Thực hiện phương thức con từ thành phần cha trong Vue.js

Question

Hiện tại, tôi có một thành phần Vue.js chứa danh sách các thành phần khác. Tôi biết rằng cách phổ biến để làm việc với vue là truyền dữ liệu cho trẻ em và phát ra các sự kiện cho phụ huynh từ trẻ em.

Tuy nhiên, trong trường hợp này, tôi muốn thực hiện một phương thức trong các thành phần con khi một nút trong số cha mẹ được nhấp. Đó sẽ là cách tốt nhất để làm điều đó?

Answer 1

Một cách được đề xuất là sử dụng global event hub. Điều này cho phép giao tiếp giữa bất kỳ thành phần nào có quyền truy cập vào hub.

Dưới đây là ví dụ cho thấy cách một trung tâm sự kiện có thể được sử dụng để kích hoạt phương pháp trên thành phần con.

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

Bạn có thể tạo dưới đây phương pháp helper trong các phương pháp trong thành phần cha mẹ của bạn:

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

Và gọi phương thức thành phần con theo cách này:

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

tôi không kiểm tra nó cho Vue> = 2.0