现在我们如果想把v-model用到除表单之外的自定义组件中，该怎么使用呢，其实官网所给的例子也比较清晰了，只是如果死脑筋的话，那就限制住了，没错说的就是我-.-.
点击显示
点击消失
其实这样父组件这边已经可以通过v-model对显示和消失进行控制了，但是封装组件的 value这个属性名是不能修改的，必须叫 value，叫 value1就不可以了
props:{
value1:{//失效
type:Boolean,
default:false
}
}
原因，看源码
functiontransformModel(options,data:any){
constprop=(options.model&&options.model.prop)||'value'//子组件不存在options.model，默认给value
constevent=(options.model&&options.model.event)||'input'//event="input"
;(data.attrs||(data.attrs={}))[prop]=data.model.value
conston=data.on||(data.on={})
constexisting=on[event]//undefined
constcallback=data.model.callback//f()
if(isDef(existing)){//false
if(
Array.isArray(existing)
?existing.indexOf(callback)===-1
:existing!==callback
){
on[event]=[callback].concat(existing)
}
}else{
on[event]=callback//把回调赋值给监听的函数
}
}
so，我们就可以加上model属性，进行代码修改
组件内部调用
当然我们也可以通过model属性，对value这个属性名进行修改，也是实现同样的效果
bool:{
type:Boolean,
default:false
},
model:{
prop:"bool",
event:'change'
}
注意如果灭有加model属性的话，对props的value属性名修改的话，是没效果的，默认的v-model的event默认修改的还是value
constprop=(options.model&&options.model.prop)||'value'//子组件不存在options.model，默认给value
constevent=(options.model&&options.model.event)||'input'//event="input"
总结
以上所述是小编给大家介绍的Vue中的v-model组件封装(类似弹窗组件)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。