html
<div id="father">
<p @click="change">{{bar}}</p>
<child-comp :message.sync="bar" >
</child-cmp>
</div>
js
Vue.component("childComp",{
props:['message'],
template:'<input @input="$emit(\'update:message\',$event.target.value);" v-bind:value="message"> '
})
new Vue({
el:'#father',
data:{
count:0,
bar:'hhhhhhh'
}
})
**利用v-model 来双向绑定 **
html
<div id="father">
<p>{{loveVue}}</p>
<base-checkbox v-model ="loveVue"></base-checkbox>
</div>
js
Vue.component("base-checkbox",{
model:{
prop:'checked',
event:'changeS'
},
props:{
checked:Boolean
},
template:'<input type="checkbox" v-bind:checked="checked" v-on:change="$emit(\'changeS\',$event.target.checked)">'
})
new Vue({
el:'#father',
data:{
loveVue:true,
}
})
.sync
html
<div id="father">
<p >{{name}}</p>
<show-name :value.sync="name">
<show-name v-bind:value="name" v-on:update:value="update">
</show-name>
</div>
js
Vue.component("show-name",{
props:{
name:String
},
template:'<input type="text" v-on:input="$emit(\'update:value\',$event.target.value)" >'
})
new Vue({
el:'#father',
data:{
name:"gaojl"
},
methods:{
update:function(e){
this.name = e;
}
}
})