vue的混合mixins学习
2023-09-27 14:24:13 时间
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,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
实际应用
混合对象的使用主要是在项目中提取出常用的公共方法,提高代码的重用率。
嗯,就酱~~
参考链接:https://cn.vuejs.org/v2/guide/mixins.html
https://blog.csdn.net/kaelyn_X/article/details/79357147
相关文章
- vue iview组件表格 render函数的使用
- vue-cli脚手架(框架)
- vue环境搭建
- Vue 中的 Ref
- Vue学习笔记之使用computed计算属性
- Vue学习笔记之Vue判断字符串(或数组)中是否包含某个元素
- Vue学习笔记之计算属性和侦听器
- Vue + ElementUI的电商管理系统实例30 项目上线-配置https服务
- 改变其他vue对象里面的信息
- vue笔记 —— 第一个vue程序(狂神)
- Vue学习(二十)插件全攻略
- clipboard 在 vue 中的使用
- 【Vue 开发实战】基础篇 # 3:Vue组件的核心概念:事件
- 【Vue 开发实战】学习笔记48篇(完结)
- vue + typescript 项目起手式
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
- Vue学习看这篇就够
- 从头开始学习vue-router
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航
- 前端学习之VUE基础四:前后端交互模式、 异步、promise用法、fetch Api、axios API、async 和 await