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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
详解如何较好的使用js
2016/12/16 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python实现二分查找算法实例
2015/05/26 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python pymongo模块用法示例
2018/03/31 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python的历史与优缺点整理
2020/05/26 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
运动会横幅标语
2014/06/17 职场文书
会计岗位说明书
2014/07/29 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers