VueJS - kích hoạt chức năng con

Question

Tôi mới sử dụng vuejs (2.0). Tôi đang cố gắng để có được chức năng này xuống:

• Click một nút
chức năng
• Kích hoạt trong thành phần con
• số Tăng trong dữ liệu của con

Đây là những gì tôi đang có

HTML:

<div id="root"> 
    <cart @addtocart="add()"></cart> 
    <button @click="$emit('addtocart')">Add to Cart</button> 
</div> 

JS:

Vue.component('cart', { 
    template: `<span>{{ items }}</span>`, 
    data() { 
    return { 
     items: 0 
    } 
    }, 
    methods: { 
    add() { 
     alert('add'); 
    } 
    } 
}); 


new Vue({ 
    el: '#root', 
    components: ['cart'], 
}); 

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn mọi người!

Answer 1

Bạn có thể sử dụng trung tâm tập trung để phát ra sự kiện (như được đề xuất trong tài liệu https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced), sau đó lắng nghe và phản ứng với những sự kiện đó trong các thành phần con của bạn. Dưới đây là một bản cập nhật nhanh chóng để mã của bạn nào đó:

var eventHub = new Vue(); 

Vue.component('cart', { 
    template: `<span>{{ items }}</span>`, 
    data() { 
    return { 
     items: 0 
    } 
    }, 
    created() { 
    eventHub.$on('add-item', this.add) 
    }, 
    methods: { 
    add() { 
     alert('add'); 
     this.items++; 
    } 
    } 
}); 


new Vue({ 
    el: '#root', 
    components: ['cart'], 
    methods: { 
    addToCart() { 
     eventHub.$emit('add-item') 
    } 
    } 
}); 

Tôi chỉ mới bắt đầu sử dụng vue bản thân mình vì vậy tôi có thể sai nhưng như xa như tôi biết, có một thành phần con phụ thuộc vào cha mẹ cụ thể là một ý tưởng tồi như nó buộc các thành phần con được "kết hợp" để cha mẹ đó hoạt động và làm cho nó không di động. Phát ra sự kiện từ một thành phần con trở lại là tốt mặc dù kể từ đó sẽ chỉ là thành phần cho phép bất cứ ai nghe biết rằng một cái gì đó đã xảy ra. Tôi đoán bạn có thể truy cập vào các phụ huynh và các sự kiện nó đã phát ra trực tiếp bằng cách sử dụng this.$parent.$on('add-item', this.method) nhưng trông hackish với tôi. Có thể nếu thành phần gốc và con của bạn sẽ luôn được kết hợp chặt chẽ theo cách này, this.$parent sẽ ổn. Ví dụ "instatiating a new vue instance" ở trên có lẽ chỉ là một cách khác để làm điều này mà không cần buộc thành phần con của bạn lên thành phần cha bởi vì các cá thể Vue triển khai hệ thống sự kiện (do đó tiết lộ $ emit, $ on methods)