第一种:model作为属性的用法
类型:{prop?:string,event?:string}
参考官网API:model
父组件
<modelchild v-model="test"></modelchild>
父的值{{test}}
<button @click='fn'></button>
……
import modelchild from '@/component/modelchild'
export default{
data(){
return{
test:0
}
},
methods:{
fn(){
this. test+=1
}
}
}
子组件
<div>{{msg}}</div>
<button @click="fn2"></button>
export default{
props:{
msg:{default:0}
},
//使用model,这两个属性,prop属性说,我要将msg作为该组件被调用时,父组件model能取到的值,event
说,我要emit cc的时候,参数值就是父组件model收到的值
model:{
prop:'msg',
event:'cc'
},
methods:{
fn2(){
this. $emit('cc',this.msg+2)
}
}
}
第二种,父组件同上
子组件
<div>{{value}}</div>
<button @click="fn22"></button>
export default{
props:{
value:{default:0}
},
methods:{
fn22(){
this. $emit('input',this.value+2)
}
}
}
第三种
父组件
<modelchild3 v-model='searchtext'>
{{searchtext}}
子组件
<input type="text" :value="value" @input="$emit('input',$event.target.value)">
export default{
data(){
},
props:{
value:{default:0}
}
}