VueJS - функция запуска триггера

Question

Я новичок в использовании vuejs (2.0). Я пытаюсь получить эту функцию вниз:

• Нажмите кнопку
• Trigger функция в детском компоненте
• число Increment в данных детских

Это то, что я в настоящее время

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

Любая помощь будет принята с благодарностью. Всем спасибо!

Answer 1

Вы можете использовать централизованный концентратор для генерации событий (как это предлагается в документах https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced), а затем прослушивать и реагировать на эти события внутри ваших дочерних компонентов. Вот быстрое обновление кода, который делает это:

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

Я только начал использовать вю себя, так что я могу ошибаться, но, насколько я знаю, имея ребенка компонента зависит от конкретного родителя является плохой идеей, он заставляет дочерний компонент «соединяться» с этим родителем, чтобы он функционировал и делал его не переносимым. Испускать события из резервной копии дочернего компонента прекрасно, хотя, поскольку это будет просто компонент, позволяющий любому слушающему знать, что что-то произошло. Я предполагаю, что вы могли бы получить доступ к родительскому объекту и событиям, которые он испустил напрямую, используя this.$parent.$on('add-item', this.method), но это выглядит грубовато для меня. Возможно, если ваш корневой и дочерний компоненты всегда будут плотно соединены таким образом, this.$parent будет в порядке. Пример «instatiating a new vue instance» выше, вероятно, является просто еще одним способом сделать это, не связывая ваш дочерний компонент с родительским компонентом, поскольку экземпляры Vue внедряют систему событий (таким образом, выставляя методы $ emit, $ on).