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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
react中使用swiper的具体方法
May 15 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 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防注入代码
2010/04/07 PHP
PHP学习笔记之一
2011/01/17 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
Laravel框架表单验证详解
2014/09/04 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
简单实现PHP留言板功能
2016/12/21 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python温度转换实例分析
2018/01/17 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
delegate与普通函数的区别
2014/01/22 面试题
马智宇婚礼主持词
2014/03/22 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
毕业横幅标语
2014/10/08 职场文书
史上最牛辞职信
2015/05/13 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP