Vue.component('my-child', { template: [ '<div class="child">', '<h2>Child Component</h2>', '<input type="text" v-model="childMessage" v-on:input="onInput"></input>', '<button @click="apply">apply</button>', '<p>{{ parentMessage }}</p>', '<p>{{ value }}</p>', '</div>' ].join(''), props: ['parentMessage', 'value'], data () { return { childMessage: '' } }, methods: { apply () { this.$emit('apply-from-child', this.childMessage) }, onInput (e) { this.$emit('input', e.target.value) } } }) const app = new Vue({ el: '#app', data () { return { messageFromChild: 'message from child', messageVModel: 'message v-model' } }, methods: { apply (value) { this.messageFromChild = value } } })
<div id="app"> <div class="parent"> <h2>Parent</h2> <p>{{ messageFromChild }}</p> <p>{{ messageVModel }}</p> </div> <my-child parent-message="literal-from-parent" v-on:apply-from-child="apply" v-model="messageVModel"></my-child> </div>