Vue使用mixin分发组件的可复用功能


Posted in Javascript onSeptember 01, 2019

vue创建高阶组件的实现不够react优雅,但那是vue和react的设计思想导致的。在react中一切都是函数,而在vue中,组件最终都是函数,但在开发时可以是JSON对象,而且每个vue组件要注意三个点:props、events和slots,就是这三个导致vue创建高阶组件时要传入相应的属性,较react要复杂。

vue官方推荐使用mixins来完成高阶组件的功能,如果对vue实现高阶组件有兴趣的话推荐看[vue实现高阶组件][1]

下面是vue官网使用mixins的例子:

// 定义一个混入对象
var myMixin = {
 created: function () {
  this.hello()
 },
 methods: {
  hello: function () {
   console.log('hello from mixin!')
  }
 }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
 mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

每个vue组件有mixins属性接收mixin数组,但由于mixin与组件,mixin与mixin之间存在属性命名冲突的问题,vue解决这个的方式是:

1 数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

2 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

3 Vue.extend()和new Vue()创建的组件,解决上述的命名冲突的方案是一样的。

总结

以上所述是小编给大家介绍的Vue使用mixin分发组件的可复用功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
在react中使用vuex的示例代码
Jul 30 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
You might like
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
js实现小球在页面规定的区域运动
2020/06/16 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
Django数据库操作的实例(增删改查)
2017/09/04 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
实例讲解Python爬取网页数据
2018/07/08 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
django rest framework serializers序列化实例
2020/05/13 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python实现GIF图倒放
2020/07/16 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
电子专业推荐信范文
2013/11/18 职场文书
茶叶生产计划书
2014/01/10 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
科技活动周标语
2014/10/08 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2015年女职工工作总结
2015/05/15 职场文书