console
Vue.component('form-component', {
template: '#form',
props: ['value'],
methods: {
onInput(event){
this.emit('input', event.target.value);
}
}
})
Vue.component('hello-component', {
template: '#hello',
props: ['user'],
data: function() {
return {
msg: 'hello'
}
}
})
new Vue({
el: '#app',
data() {
return {
user: 'zs'
}
}
})
<template id="form">
<div>
<label for="name">
type your name:
</label>
<input type="text" :value="value" id="name" @input="onInput"/>
</div>
</template>
<template id="hello">
<h1>
{{msg}} {{user}}
</h1>
</template>
<div id="app">
<form-component :user="user">
</form-component>
<hello-component :user="user">
</hello-component>
</div>