vue2【详解】mixins —— 抽离公共逻辑

mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等

使用方法

  1. 创建文件myMixin.js
js 复制代码
export const myMixin = {
    data() {
        return {
            webName: '朝阳的博客'
        }
    },
    created() {
        alert(`欢迎来到${this.webName}`)
    },
    methods: {
        hi() {
            alert(`欢迎来到${this.webName}`)
        }
    }
}
  1. vue文件中引入并使用myMixin.js
js 复制代码
import {myMixin} from './myMixin.js'
js 复制代码
export default {
    mixins: [myMixin],

mixins的值为一个数组,可以传入多个minxins

js 复制代码
 mixins: [myMixin1,myMixin2],

注意事项

  • mixins中的变量和方法与vue文件中的变量和方法同名时,vue文件中的变量和方法会覆盖mixins中的
  • mixins中函数(如生命周期钩子函数)会在vue中的函数之前执行
    • 如mixins和vue中都有mounted生命周期钩子函数,则mixins中的先执行,vue文件中的后执行。
  • 不同vue文件引入同一个mixins时,mixins中定义的变量都属于各自的vue实例,相互之间互不影响。
  • 全局混入会影响每个单独创建的 Vue 实例 ,包括第三方组件,所以使用时格外小心。

mixins 的缺点

  • 变量来源不明确,不利于阅读
  • 多 mixin 可能会造成命名冲突
  • mixin 和组件可能出现多对多的关系,复杂度较高
相关推荐
m0_748461391 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者2 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy2 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
羊羊小栈3 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star3 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1833 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_4 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
Zz_waiting.6 小时前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风6 小时前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
Simon_He6 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown