Parent value: {{parentValue}}

The docs state that is equivalent to That is why the prop on the child needs to be named value, and why the child needs to $emit an event named input.","dateCreated":"2019-06-03T08:03:36.000Z","upvoteCount":3,"url":"https://ednsquare.com/question/thread/13845ddc-874d-4f9b-9c6b-724c63c7f513","author":{"@type":"Person","name":"Aditya Agrawal","image":"https://cdn.ednsquare.com/s/*/212a3510-ddb5-4aa4-8953-fb98c306dc6c.jpeg","url":"https://ednsquare.com/@aditya"}},"suggestedAnswer":[{"@type":"Answer","text":"In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next. a How to pass props Following is the code to pass props to a child element:

How to emit event HTML:

{{ total }}

JS: Vue.component('button-counter', { template: '', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } })","dateCreated":"2019-06-03T08:06:45.000Z","upvoteCount":3,"url":"https://ednsquare.com/question/thread/e6c87e6f-2a1a-4c2f-88f2-7fa5a79577f9","author":{"@type":"Person","name":"Aditya Agrawal","image":"https://cdn.ednsquare.com/s/*/212a3510-ddb5-4aa4-8953-fb98c306dc6c.jpeg","url":"https://ednsquare.com/@aditya"}}]}}Ednsquare

How to update parent data from child component in vuejs?

I'm starting to play with vuejs (2.0). I built a simple page with one component in it. The page has one Vue instance with data. On that page I registered and added the component to html. The component has one input[type=text]. I want that value to reflect on the parent (main Vue instance).

How do I correctly update the component's parent data? Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working.

Write your answer...

Never miss a post from Sumit Sharma, when you sign up for Ednsquare.