详解Vue.js组件可复用性的混合(mixin)方式和自定义指令


Posted in Javascript onSeptember 06, 2017

混合是什么

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

例如:

var tpl1={
  template:'#stpl1',
  data:function(){
    return {msg:false}
  },
  methods:{
    msgf:function(){
      this.msg=!this.msg
    }
  }
}
var tpl2={
  template:'#stpl2',
  data:function(){
    return {msg:false}
  },
  methods:{
    show:function(){
      this.msg=true
    },
    hide:function(){
      this.msg=false
    }
  }
}
new Vue({
  el:'#box',
  components:{
    tpla:tpl1,
    tplb:tpl2,
  }
})

我们会发现,两个组件中的数据大多数相同,这是我们可以将它们进行混合

// 首先,定义一个混合对象
var mymixin = {
  data:function(){
    return {msg:false}
  },
  methods:{
    show:function(){
      this.msg=true
    },
    hide:function(){
      this.msg=false
    },
    msgf:function(){
      this.msg=!this.msg
    }
  }
}
var tpl1={
  template:'#stpl1',
  minins:[mymixin]
}
var tpl2={
  template:'#stpl2',
  minins:[mymixin]
}
// 如果我们需要在第一个组件定义data为true时,我们可以直接在组件内定义,他会覆盖mixin的data
var tpl1={
  template:'#stpl1',
  minins:[mymixin],
  data:function(){
    msg:true
  }
}

自定义指令

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

也可以注册局部指令,组件中接受一个 directives 的选项:

directives: {
 focus: {
  // 指令的定义---
 }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性:

<input v-focus>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 #Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 #Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 #Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
Vue的百度地图插件尝试使用
Sep 06 #Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 #Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python turtle库的画笔控制说明
2020/06/28 Python
keras的三种模型实现与区别说明
2020/07/03 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Ado与Ado.net的相同与不同
2014/12/08 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
安全保证书范文
2014/04/29 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书