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中Get和Set访问器的实现代码
Sep 19 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue使用自定义icon图标的方法
May 14 Javascript
vue-router的两种模式的区别
May 30 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
PHP网站提速三大“软”招
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
jsonp原理及使用
2013/10/28 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
理解JS事件循环
2016/01/07 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue实现简单图片上传
2020/06/30 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
用python实现学生管理系统
2020/07/24 Python
Python如何给函数库增加日志功能
2020/08/04 Python
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
教师一帮一活动总结
2014/07/08 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
合作意向书范本
2019/04/17 职场文书