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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
vue实现图书管理系统
Dec 29 Vue.js
详解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中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python中super的用法实例
2015/05/28 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
详解Python中的Lock和Rlock
2021/01/26 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
劳动之星获奖感言
2014/02/01 职场文书
给老婆的保证书范文
2014/04/28 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
英语分层教学实施方案
2014/06/15 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
组工干部对照检查材料
2014/08/25 职场文书
党小组意见范文
2015/06/08 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
酒店厨房管理制度
2015/08/06 职场文书
节约用水广告语60条
2019/11/14 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技