广告位招租 (vx: ghostcode, 备注:网站广告)
用法:
v-model (2.2.0+)
<!--v-model写法-->
<my-component v-model="value">
<!--展开语法糖后的写法-->
<my-component
:value="value"
@input="value = $event.target.value"
>
使用:
// 父组件
<child v-model="love"/>
// 子组件
{
props:{
value:{
type:String,
default:'my love'
}
},
...
methods:{
onClick(){
this.$emit('input','love you!')
}
}
}
v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是可通过 model 来修改,同时需要手动的抛出修改后 event 的名字:
Vue.component('my-component', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean // 还是需要声明
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)" // 手动抛出事件
>
`
})
组件使用方法不变:
<my-component v-model="checkedStatus">
.sync (2.3.0+)
<!--语法糖.sync-->
<my-component :value.sync="msg" />
<!--编译后的写法-->
<my-component
:value="msg"
@update:value="(val) => msg = val"
>
使用:
// 父组件
<dialog :visible.sync="isVisible"/>
// 子组件
{
props:{
visible:{
type:Boolean,
default:false
}
},
...
methods:{
onClose(){
this.$emit('update:visible',false)
}
}
}
同
- 两者的本质都是语法糖。
- 目的都是实现组件与外部数据的双向绑定。
异
- v-model 只能作用于单个属性,.sync 可作用多个属性。
- v-model 主要作用与表单注重值的改变,.sync 主要作用与状态的改变(显隐)。