vuejs update parent data from child component vuejs update parent data from child component vue.js vue.js

vuejs update parent data from child component


Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit events and let the parent respond to those events.

In your specific case, you could use a custom component with v-model. This is a special syntax which allows for something close to two-way binding, but is actually a shorthand for the event-driven architecture described above. You can read about it here -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.

Here's a simple example:

Vue.component('child', {  template: '#child',    //The child has a prop named 'value'. v-model will automatically bind to this prop  props: ['value'],  methods: {    updateValue: 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>