vue中的mixin(局部混入、全局混入)

一、mixin是什么

Mixin面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类;Mixin类通常作为功能模块使用,在需要该功能时"混入",有利于代码复用又避免了多继承的复杂

Vue中的mixin,先来看一下官方定义

mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods、created、computed等等

在Vue中我们可以局部混入跟全局混入

局部混入

定义一个 mixins.js 文件,此文件中可以混入Vue中所有的设置项,methods、computed、watch、data、生命周期函数等都可以。

javascript 复制代码
// mixin.js
export const myMixin = {
  methods: {
    sharedMethod() {
      console.log('This method is shared between components.');
    }
  }
};
javascript 复制代码
// MyComponent.vue
<template>
  <div>
    <button @click="sharedMethod">Click me</button>
  </div>
</template>
 
<script>
import { myMixin } from './mixin.js';
 
export default {
  mixins: [myMixin],
  // 组件自己的选项...
};
</script>

全局混入

全局混入表示混入到Vue对象中,Vue下的所有组件都会使用混入的方法,一定要注意,是所有的组件,所以,在使用全局混入的时候要确保所有的组件都会使用到。

如果在使用混入的过程中出现冲突,除生命周期钩子外,其余的都以本组件中的为主,混入的不生效;生命周期钩子产生冲突是先执行混入的声明周期钩子,再执行本组件的生命周期钩子。

javascript 复制代码
//main.js文件
import {mixin1, mixin2} from "../mixins.js"
 
Vue.mixin(mixin1)
Vue.mixin(mixin2)
javascript 复制代码
//如果不想创建单独的类,也可以直接写一个配置对象
Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

PS:全局混入常用于插件的编写,使用全局混入需要特别注意,因为它会影响到每一个组件实例(包括第三方组件)

二、使用场景

在日常的开发中,我们经常会遇到在不同的组件中经常会需要用到一些功能相同或者相似的代码(造成代码冗余),这时可以通过Vue的mixin功能将相同或者相似的代码抽取出来。

举个例子

定义一个modal弹窗组件,内部通过isShowing来控制显示

javascript 复制代码
const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

定义一个tooltip提示框,内部通过isShowing来控制显示

javascript 复制代码
const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

通过观察上面两个组件,发现两者的逻辑是相同,代码控制显示也是相同的,这时候mixin就派上用场了

首先抽出共同代码,编写一个mixin

javascript 复制代码
const toggle = {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

两个组件在使用上,只需要引入mixin

javascript 复制代码
const Modal = {
  template: '#modal',
  mixins: [toggle]
};
 
const Tooltip = {
  template: '#tooltip',
  mixins: [toggle]
}
相关推荐
Qlittleboy17 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days205017 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端17 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿17 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL17 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉17 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~17 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng18 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript
matlab的学徒18 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
路人与大师18 小时前
【Mermaid.js】从入门到精通:完美处理节点中的空格、括号和特殊字符
开发语言·javascript·信息可视化