Vue 中mixin 的用法详解


Posted in Javascript onApril 23, 2018

说下我对vue中mixin的一点理解

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别?

     组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

     而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

     单纯组件引用:

          父组件 + 子组件 >>> 父组件 + 子组件

     mixins:

          父组件 + 子组件 >>> new父组件

作用:多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数会两个都被调用,mixin中的钩子首先执行。

下面给大家介绍vue mixin的用法,具体介绍如下所示:

1.定义一个 js 文件(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

关于用法,vue文档中有详细的介绍,这里只介绍怎么在一个vue文件中使用mixin。

2.在vue文件中使用mixin

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

总结

以上所述是小编给大家介绍的Vue 中mixin 的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 #Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
javascript中的面向对象
2017/03/30 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python调用fortran模块
2016/04/08 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python入门教程 python入门神图一张
2018/03/05 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
如何在pycharm中安装第三方包
2020/10/27 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
2014年工程师工作总结
2014/11/25 职场文书
投资申请报告
2015/05/19 职场文书
行政处罚听证告知书
2015/07/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书