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


Posted in Javascript onJanuary 08, 2020

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

Vue.component('base-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean
 },
 template: `
  <input
   type="checkbox"
   v-bind:checked="checked"
   v-on:change="$emit('change', $event.target.checked)"
  >
 `
})
<base-checkbox v-model="lovingVue"></base-checkbox>

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

<!--封装的类弹窗组件-->
<template>
  <div>
    <div v-show="value">这是v-model的弹窗组件</div>
  </div>
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<!--父组件-->
<template>
  <div>
    <v-model v-model="value"></v-model>
    <button @click="value=true">点击显示</button>
    <button @click="value=false">点击消失</button>
  </div>
</template>
<script>
import VModel from "./Vmodel"
export default {
  components:{VModel},
  data:function(){
    return {
      value:true
    }
  }
}
</script>

其实这样父组件这边已经可以通过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属性,进行代码修改

<template>
  <div>
    <div v-show="value">这是v-model的弹窗组件</div>
    <div @click="cancelClick">组件内部调用</div>
  </div>
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    },
    model:{
      prop:"value",
      event:'change'
    }
  },
  methods:{
    cancelClick:function(){
      //内部调用这个方法可以进行控制
      this.$emit("change",false)
    }
  }
}
</script>

当然我们也可以通过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组件封装(类似弹窗组件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
jquery实现吸顶导航效果
Jan 08 #jQuery
JS实现网站吸顶条
Jan 08 #Javascript
js实现移动端吸顶效果
Jan 08 #Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 #Javascript
微信小程序实现吸顶效果
Jan 08 #Javascript
JS实现吸顶特效
Jan 08 #Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
Java servlet面试题
2012/03/04 面试题
学生干部的自我评价分享
2014/01/18 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2014年测量员工作总结
2014/12/12 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python