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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python生成二维码的实例详解
2017/10/29 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
网络宣传方案
2014/03/15 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
飞越疯人院观后感
2015/06/09 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Mysql排序的特性详情
2021/11/01 MySQL
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers