详解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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
Javascript的一种模块模式
Sep 08 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 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
星际玩家的三大定律
2020/03/04 星际争霸
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
社团成立邀请函
2014/01/08 职场文书
社区党员先进事迹
2014/01/22 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
创业计划书之水果店
2019/07/18 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Log4j.properties配置及其使用
2021/08/02 Java/Android