VueJS - funkcja podrzędna wyzwalacza

Question

Jestem nowy w użyciu vuejs (2.0). Próbuję dostać tę funkcjonalność w dół:

• kliknij przycisk
funkcji
• wyzwalania w składniku dziecięcej
• numer przyrost danych dziecka

To co obecnie mam

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'], 
}); 

Każda pomoc będzie mile widziana. Dziękuję wszystkim!

Answer 1

Można użyć scentralizowanego koncentratora do emitowania zdarzeń (zgodnie z sugestiami w dokumencie https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced), a następnie słuchać i reagować na te zdarzenia wewnątrz komponentów podrzędnych. Oto szybki update do swojego kodu, który robi:

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') 
    } 
    } 
}); 

Właśnie zaczął używać vue siebie więc mogę się mylić, ale o ile mi wiadomo, zawierający składnik dziecka zależy od konkretnego rodzica jest to zły pomysł, zmusza komponent potomny do "sprzężenia" z tym rodzicem, aby działał i czyni go nieprzenośnym. Emitowanie wydarzeń z kopii zapasowej komponentu potomnego jest w porządku, ponieważ byłby to element pozwalający każdemu słuchaćemu dowiedzieć się, że coś się stało. Domyślam się, że mógłbyś uzyskać dostęp do rodzica i zdarzeń, które on wydał bezpośrednio, używając this.$parent.$on('add-item', this.method), ale to wygląda na hackish do mnie. Być może, jeśli Twój element główny i komponent potomny będą zawsze ściśle powiązane w ten sposób, this.$parent będzie w porządku. Przykład "instatiating the new vue instance" powyżej jest prawdopodobnie tylko innym sposobem, aby to zrobić, nie wiążąc komponentu potomnego z komponentem nadrzędnym, ponieważ instancje Vue implementują system zdarzeń (w ten sposób eksponując $ emit, $ na metodach).