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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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
用PHP4访问Oracle815
2006/10/09 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP5.3新特性小结
2016/02/14 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python正规则表达式学习指南
2016/08/02 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python AES加密模块用法分析
2017/05/22 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
详解python中的Turtle函数库
2018/11/19 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python字典排序的方法
2019/10/12 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
经典C++面试题一
2016/11/06 面试题
介绍一下gcc特性
2012/01/20 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
安全事故检讨书
2014/01/18 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
工程技术员岗位职责
2014/03/02 职场文书
出生公证委托书
2014/04/03 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
八年级作文之友情
2019/11/25 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
python实现学生信息管理系统(面向对象)
2022/06/05 Python