vue的混合mixins学习
时间:2019-04-15
本文章向大家介绍vue的混合mixins学习,主要包括vue的混合mixins学习使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
mixins
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
例子
新建一个 base.js 文件用于定义混合对象:
// base.js export const mixin = { created: function () { console.log('混入对象的钩子被调用') }, methods: { foo(){ console.log('foo'); }, conflicting(){ console.log('from mixin'); } } }
在 App.vue 组件中使用混合对象:
// App.vue <template> <!-- ... --> </template> <script> import {mixin} from "./base.js"; // 导入混合对象 export default { mixins: [mixin], // 记得一定要添加 mixins 属性,要求赋值一个数组,意味着可以使用多个混合对象 // ... created:function(){ console.log('组件钩子被调用') this.foo(); this.conflicting(); }, method: { conflicting(){ console.log("from self"); } } } </script>
要点
1、当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合–数据对象在内部会进行浅合并 (一层属性深度)。
2、混入对象在和组件的数据发生冲突时以组件数据优先。
3、同名钩子函数将混合为一个数组,因此都将被调用
4、混入对象的钩子将在组件自身钩子之前调用。
5、值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
实际应用
混合对象的使用主要是在项目中提取出常用的公共方法,提高代码的重用率。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter Text(文本控件)
- 纯JS实现在一个字符串b中查找另一个字符串a出现的所有位置,并且不使用字符串的方法(递归)
- 【剑指Offer】替换空格
- 面试汇总(一):针对百度面试总结
- Shell awk命令
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第五天:adlist
- redis学习(十一)
- 互联网软件常见开发方法
- 利用Vue实现简易tab切换效果
- 第3天:最近笔试编程题汇总
- 设计模式学习(四)-UML中的类图及类图之间的关系
- 数据结构与算法(一)——学习工具的推荐
- sparc v8架构的异常处理
- 设计模式(五)-工厂方法模式
- html 的div或其他元素监听 resize事件不生效的解决办法