VueJS - trigger trigger function

Question

I am new to using vujs (2.0). I am trying to disable this feature:

• Press button
• Trigger function in child component
• Incremental number in child data

This is what I currently have

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

Any help would be greatly appreciated. Thanks everyone!

Answer 1

You can use a centralized hub to generate events (as suggested in the docs https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced ), then listen and respond to these events inside your child components . Your code that does this is quickly updated here:

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

I just started using vue myself, so maybe I'm wrong, but as far as I know, the presence of a child component depends on the specific parent, this is a bad idea, because it forces the child component to be “connected” to this parent for work and makes it not portable . Firing events from a backup of a child component is fine, though, since it will be just a component that lets any listener know that something has happened. I assume that you can access the parent element and the events that it emitted directly using this.$parent.$on('add-item', this.method) , but that seems to be hacked to me. Maybe if your root and child components are always tightly connected this way, this.$parent will be fine. The above example of "instatiating a new vue instance" is perhaps another way to do this without associating the child component with the parent component, since Vue instances implement the event system (thus exposing the methods $ emit, $ on)

Answer 2

It works great with method access using $children on the Parent Vue Component , and it saves everything very simply:

 <div id="main-component"> <!-- BUTTON on Main Component that will trigger the method in Child Component --> <button @click="$children[0].coolMethod();">I will trigger the a method on Child Component</button> <!-- CHILD Component --> <some-component-that-has-cool-method></some-component-that-has-cool-method> </div> 

Note: $children[0] , because we mean method , which is at index 0 .

There are other ways to achieve this, and they are described here .

Here is an excerpt from this discussion:

Just like $ parent for a component that is a child of another, there are children ($ children? Can't remember) child components, but you can just add a link to your component to make this a little more clear, maybe.

Good luck ....