To achieve effectiveness, I have created 2 fiddles. One method involves using v-on and emitter to facilitate communication between child and parent components. The other method is to directly update the parent data within the child component.
I personally recommend the first method.
Take a look at the first example, which utilizes the v-on and emitter approach: https://jsfiddle.net/seaify/p8fh108j/
Vue.component('text-input', {
props: ["parent_field"],
template: `
<input type="text" v-model="text">
`,
data: function() {
return {text: ''}
},
watch: {
text: function(value, old_value) {
this.$emit('update_parent', this.parent_field, value)
}
}
});
Vue.component('my-app-form', {
template: `
<div class="my-app-form">
<div class="my-text-input">
Name: <text-input parent_field="name" v-on:update_parent='update_self'></text-input>
</div>
<div class="my-text-input">
Email: <text-input parent_field="email" v-on:update_parent='update_self'></text-input>
</div>
<div class="result">Result: name = {{name}}, email = {{email}}</div>
</div>
`,
methods: {
update_self: function(key, value) {
this[key] = value
}
},
data: function() {
return {
name: "",
email: ""
}
},
});
new Vue({
el: '#app',
template: `
<div>
<my-app-form></my-app-form>
</div>
`,
});
Here is the link to the second example where the parent component is directly updated without communication: https://jsfiddle.net/seaify/jczowb54/10
Vue.component('text-input', {
props: ["parent_field"],
template: `
<input type="text" v-model="text">
`,
data: function() {
return {text: ''}
},
watch: {
text: function(value, old_value) {
this.$parent[this.parent_field] = value
}
}
});
Vue.component('my-app-form', {
template: `
<div class="my-app-form">
<div class="my-text-input">
Name: <text-input parent_field="name"></text-input>
</div>
<div class="my-text-input">
Email: <text-input parent_field="email" ></text-input>
</div>
<div class="result">Result: name = {{name}}, email = {{email}}</div>
</div>
`,
data: function() {
return {
name: "",
email: ""
}
},
});
new Vue({
el: '#app',
template: `
<div>
<my-app-form></my-app-form>
</div>
`
});
A special thanks to Mani for providing the original fiddle, as I have forked it and made some code updates.