详解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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Jquery获取radio选中的值
May 05 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
轻松玩转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远程采集图片详细教程
2014/07/01 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
动态密码技术
2012/10/18 面试题
优秀大学生推荐信范文
2013/11/28 职场文书
演讲稿开场白
2014/01/13 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
公司授权委托书范文
2014/09/21 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
信息技术课教学反思
2016/02/23 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Win11查看设备管理器
2022/04/19 数码科技
方法汇总:Python 安装第三方库常用
2022/04/26 Python