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 相关文章推荐
jQuery 图片切换插件(代码比较少)
May 07 Javascript
jQuery 联动日历实现代码
May 31 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
js选项卡的实现方法
Feb 09 Javascript
jquery使用经验小结
May 20 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
vue-cli中实现响应式布局的方法
Mar 02 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脚本不报错的原因
2014/06/12 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python中装饰器学习总结
2018/02/10 Python
python中实现字符串翻转的方法
2018/07/11 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python制作图片缩略图
2019/04/30 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python 转换文本编码实现解析
2019/08/27 Python
delegate与普通函数的区别
2014/01/22 面试题
心理健康心得体会
2014/01/02 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
团队经理竞聘书
2014/03/31 职场文书
减负增效提质方案
2014/05/23 职场文书
企业宣传工作方案
2014/06/02 职场文书
综合管理员岗位职责
2015/02/11 职场文书
工作自我推荐信范文
2015/03/25 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL