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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
node后端服务保活的实现
2019/11/10 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python对象与json相互转换的方法
2019/05/07 Python
django如何自己创建一个中间件
2019/07/24 Python
python编写计算器功能
2019/10/25 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
PyQt5实现画布小程序
2020/05/30 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
小学端午节活动方案
2014/03/13 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
七年级英语教学反思
2016/02/15 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android