vue中 mixin使用
mixins就是混入。
一个混入对象可以包含任意组件选项。
同一个生命周期,混入对象会比组件的先执行。
1.创建一个mixin.js,用export暴露出mixins对象
export const mixins = {
methods:{
hello(){
console.log("hello world!");
}
},
created(){
this.hello()
}
}
2.在组件中引入这个mixins对象,通过mixins:[xxx],使用mixins对象
import {mixins} from './mixin';
export default {
data () {
return {
};
},
created(){
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixins]
};
补充:
可以混入多个mixins对象
//暴露两个mixins对象export const mixinsTest = {
methods: {
hello() {
console.log("hello mixins");
}
},
created() {
this.hello();
},
}
export const mixinsTest2 = {
methods:{
hello2(){
console.log("hello2");
}
},
created() {
this.hello2();
},
}
组件中引入两个mixins对象
home
import {mixinsTest,mixinsTest2} from '../util/test.js'export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("1212");
},
mixins:[mixinsTest2,mixinsTest] // 先调用那个mixins对象,就先执行哪个
}
打印的顺序是:
原文地址:https://www.cnblogs.com/csygl/p/15138556.html
- ES6新特性概览
- 数据结构-顺序表的定义及python实现
- 洛谷P1516 青蛙的约会
- python实现二叉树的创建和遍历
- python中numpy模块下的np.clip()的用法
- Leetcode-Easy 543. Diameter of Binary Tree
- Leetcode-Easy 572. Subtree of Another Tree
- 图解javascript this指向什么?
- 2017/6/8-python正则表达式的使用
- 洛谷P1306 斐波那契公约数
- Angular开发实践(二):HRM运行机制
- Angular开发实践(一):环境准备及框架搭建
- 洛谷P2818 天使的起誓
- 连续子数组的最大和
- 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 数组属性和方法