详解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 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
药学职务聘任书
2014/03/29 职场文书
项目建议书怎么写
2014/05/15 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Python实现简单得递归下降Parser
2022/05/02 Python