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="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
    <div id="app">
        <p>Parent value: {{parentValue}}</p>
        <child v-model="parentValue"></child>
    </div>
    <template id="child">
        <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
    </template>
    
    Answered on November 15, 2018.
    Add Comment


  • Your Answer

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