Vue v-model组件封装(类似弹窗组件)

这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细,具有一定的参考借鉴价值,…

这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件

 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: `  ` }) 
   

现在我们如果想把v-model用到除表单之外的自定义组件中,该怎么使用呢,其实官网所给的例子也比较清晰了,只是如果死脑筋的话,那就限制住了,没错说的就是我-.-.

 
   
    
     
     
      这是v-model的弹窗组件
     
    
   
   
    
     
     
     点击显示
     点击消失
    
   

其实这样父组件这边已经可以通过v-model对显示和消失进行控制了,但是封装组件的 value 这个属性名是不能修改的,必须叫 value ,叫 value1 就不可以了

 props:{ value1:{ //失效 type:Boolean, default:false } }

原因,看源码

 function transformModel (options, data: any) { const prop = (options.model && options.model.prop) || 'value' //子组件不存在options.model,默认给value const event = (options.model && options.model.event) || 'input'//event="input" ;(data.attrs || (data.attrs = {}))[prop] = data.model.value const on = data.on || (data.on = {}) const existing = on[event] //undefined const callback = 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属性,进行代码修改

 
    
     
     
      这是v-model的弹窗组件
     
     
      组件内部调用
     
    
   

当然我们也可以通过model属性,对value这个属性名进行修改,也是实现同样的效果

 bool:{ type:Boolean, default:false }, model:{ prop:"bool", event:'change' }

注意如果灭有加model属性的话,对props的value属性名修改的话,是没效果的,默认的v-model的event默认修改的还是value

 const prop = (options.model && options.model.prop) || 'value' //子组件不存在options.model,默认给value const event = (options.model && options.model.event) || 'input'//event="input"

总结

以上所述是小编给大家介绍的Vue中的 v-model组件封装(类似弹窗组件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对www.cfluntan.cn网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上就是Vue v-model组件封装(类似弹窗组件)的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部