How do vuejs update parent data from child component ?

How do vuejs update parent data from child component ?

Asked on November 15, 2018 in vue.js.
Add Comment

  • 1 Answer(s)
      • Two-way binding has been deprecated in Vue 2.0 in favor of  more event-driven architecture.
        Normally, a child should not mutate its props.


      • It should $emit the events and parents are response to those events.


      • In your specific case, you could use a custom component with v-model.


      • This is a special syntax  allows for something close to two-way binding.


      • But is actually a shorthand for the event-driven architecture described.


    Vue.component('child', {
        template: '#child',
        //The child has a prop named 'value'. v-model will automatically bind to this prop
        props: ['value'],
        methods: {
            update Value: function (value) {
                this.$emit('input', value);
    new Vue({
        el: '#app',
        data: {
            parentValue: 'hello'
    <script src=""></script>
    <div id="app">
        <p>Parent value: {{parentValue}}</p>
        <child v-model="parentValue"></child>
    <template id="child">
        <input type="text" v-bind:value="value" v-on:input="updateValue($">
    Answered on November 15, 2018.
    Add Comment

  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.