VUE——mixins混入

Mixins(混入),一种分发 Vue 组件中可复用功能的非常灵活的方式;

实际由一个mixins.js文件,导出一个js对象,包含组件中的变量、方法、生命周期函数(如:data、components、methods、beforecreated、props等等),是一个公共的对象,各个组件可以通过引入它复用里面的功能。

什么时候使用Mixins?

当我们多个组件中数据、功能、界面很接近的时候,我们可以利用mixins将公共部分提取出来,通过mixins去封装成一个公共对象,提供给各个组件使用,跟"公共组件"相似。

怎么使用Mixins?

在src目录下(或项目中存储公共js文件目录下)创建一个mixins文件,在文件夹下创建一个mixins.js文件,内容如下

js 复制代码
// mixins.js文件内声明mixin对象
export const mixin = {
    components:{},
    data(){
    return {}
	},
    methods:{},
    beforeCreated(){}
}
js 复制代码
// 在组件中引入使用 组件直接可以访问到其变量方法
import { comMixin } from '@/mixins/mixins.js'
export default {
  mixins: [comMixin],
  data() {
    return {}
  },
  created() {},
}
使用Mixins需要注意什么?

1、Mixins的设计模式类似简单的工厂模式,其变量、方法都是独立在当前组件的,不同组件间互不影响;

2、对象合并,当mixins与当前组件有变量、方法命名一致时,组件的变量、方法会优先,覆盖mixins中的变量、方法。

3、生命周期函数,mixins内的会优先执行,组件的后执行。

4、异步请求函数返回值,无法直接获取返回值,需要直接返回异步函数,.then()获取。

Mixins、Vuex、公共组件的差别
Mixins Vuex 公共组件
官方介绍 一种分发Vue组件中可复用功能的一种灵活方式 全局状态管理库 可重用的UI元素
设计模式 简单 工厂模式 单例工厂模式 简单 工厂模式
功能 共用变量、方法 实现跨组件的通讯,实现数据共享; 共用HTML、变量、方法
本质 js对象 store对象 html
独立性 变量、方法混入当前组件 独立 父子组件相对独立
不同 可以复用当前组件的变量、方法(data、methods、生命周期函数) 纯粹全局管理数据 复用共有组件的UI元素、变量、方法
相关推荐
细节控菜鸡8 分钟前
【2025最新】ArcGIS for JS 范围裁剪(只保留特定区域显示),实现精准地理范围聚焦
开发语言·javascript·arcgis
前端小菜袅9 分钟前
uniapp配置自动导入uni生命周期等方法
前端·javascript·uni-app
Apifox10 分钟前
如何在 Apifox 中通过 AI 一键生成几十个测试用例?
前端·后端·ai编程
你真的可爱呀11 分钟前
uniapp学习【整体实践】
前端·学习·uni-app·实践
一枚前端小能手18 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123434 分钟前
异步请求的性能提升
前端
我是天龙_绍36 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
麦麦大数据1 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue