Passing A Value To The Parent Component

How could a child component pass its value to the parent component? Here is my child component: Javascript: new Vue({ el: '#table-list', data: { tableList: ['Empty!'],

Solution 1:

You should use vue components, specifically events mechanism for what you want to archive.

Props are for pass data from parent to a child components, and events to send messages from child component to parent.

We have learned that the parent can pass data down to the child using props, but how do we communicate back to the parent when something happens? This is where Vue’s custom event system comes in.

Please see this fiddle https://jsfiddle.net/AldoRomo88/sLo1zx5b/

I have changed your selectTable method to emit a custom event

selectTable: function(table) {
  this.$emit('item-changed',table);
}

And in your parent component you just need to listen for that event

<div>
{{selectedItem}}
</div>

<table-list @item-changed="newValue => selectedItem = newValue " ></table-list>

Let me know if you need more clarification.

Solution 2:

Here is the page that explains how children emit events to listening parents.

Here is the page on managing state.

Remember what you're aiming for, with VUE, is MVVM. You want all your state in a store, where each item of state is stored once, regardless of how many times it's referenced, and how many ways it can be updated.

Your tableSelected is an item of state. You can pass state changes up the chain if you need to, so long as they finish in a store, not in a component or a vue. But you can keep it simple: make tableSelected a property in your store, and declare it directly in the data element of components that need it. If you want to be rigorous, put a changeTableSelected() method on the store.

You need to start worrying about props and events if one component will have many instances, or if a component knows nothing about the page on which it will appear. Until that time, I would prefer using data and the store.