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 应用代码 方便的排序功能
Feb 06 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
RequireJS使用注意细节
May 15 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
TS 类型兼容教程示例详解
Sep 23 Javascript
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实现异步数据调用的方法
2015/12/24 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
javascript中BOM基础知识总结
2017/02/14 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
iview table render集成switch开关的实例
2018/03/14 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python进度条的制作代码实例
2019/08/31 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
小学学校评估方案
2014/06/08 职场文书
法定代表人身份证明书
2014/09/10 职场文书
工作失误检讨书范文
2015/01/26 职场文书
孟佩杰观后感
2015/06/17 职场文书
校运会加油稿大全
2015/07/22 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js