Vue 一秒搞懂mixins混入

在项目开发过程中，你是否会遇到此类问题：在多个组件中用到相同的方法。如果遇到此类问题，那么在多个组件中重复写同样的方法会显得非常繁琐，代码也会不好维护。就此，Vue提供了一个mixins混入的一个概念：

mixins混入是一种分发Vue组件中可复用功能非常灵活的方式，它接收一个对象数组。并且分为局部混入和全局混入。

一、局部混入

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

使用时在组件中直接引入此文件使用即可，它的值是一个数组，表示可以混入多个：

// mixins.js文件
export const mixin1 = {data() {return {name: 'bjl'}}
}export const mixin2 = {methods: {showName() {console.log(this.name)}}
}

// 某一个组件中
<template>...
</template><script>
import {mixin1, mixin2} from "../mixins.js"
export default {mixins: [mixin1, mixin2]
}
</script>

二、全局混入

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

定义一个mixins.js文件，在main.js文件中引入并使用：

//main.js文件
import {mixin1, mixin2} from "../mixins.js"Vue.mixin(mixin1)
Vue.mixin(mixin2)

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

Vue 一秒搞懂mixins混入相关推荐

神了！！看完这篇文章我不仅学会了手撸vue三开关组件，还搞懂了父子组件传值
神了!!看完这篇文章我不仅学会了手撸vue三开关组件,还搞懂了父子组件传值引子前置知识什么是vue组件父子组件传值父传子子传父 model选项的引入三开关组件(three-switch) ...
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现什么是pinia pinia相比vuex的优势为什么要使用pinia? 基本示例知识回调(不懂就看这儿 ...
Vue中使用mixins混入
mixins在Vue中的用法一.mixins混入混入(mixins)提供了一种非常灵活的方式,来分发vue组件中的可服用功能.一个混入对象可以包含任意的组件选项(vue在script的部分).当组 ...
转：前端 100 问：能搞懂80%的请把简历给我
<前端 100 问:能搞懂80%的请把简历给我> 引言半年时间,几千人参与,精选大厂前端面试高频 100 题,这就是「壹题」. 在 2019 年 1 月 21 日这天,「壹题」项目正式开 ...
想要彻底搞懂“异地多活”，看完这篇就够了
在软件开发领域,「异地多活」是分布式系统架构设计的一座高峰,很多人经常听过它,但很少人理解其中的原理. 异地多活到底是什么?为什么需要异地多活?它到底解决了什么问题?究竟是怎么解决的? 这些疑问,想必 ...
搞懂分布式技术16：浅谈分布式锁的几种方案
搞懂分布式技术16:浅谈分布式锁的几种方案前言随着互联网技术的不断发展,数据量的不断增加,业务逻辑日趋复杂,在这种背景下,传统的集中式系统已经无法满足我们的业务需求,分布式系统被应用在更多的场景, ...
太强了！李宏毅：1 天搞懂深度学习，我总结了 300 页 PPT
<1 天搞懂深度学习>,300 多页的 ppt,台湾李宏毅教授写的,非常棒.不夸张地说,是我看过最系统,也最通俗易懂的,关于深度学习的文章. 这份 300 页的 PPT,被搬运到了 Sli ...
IM的扫码登录功能如何实现？一文搞懂主流的扫码登录技术原理
本文引用了3位作者"精品唯居"." Yangfan2016"." MrYun"的部分文章内容,一并感谢. 1.引言扫码登录这个功能,最早 ...
组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...

Vue 一秒搞懂mixins混入

一、局部混入

二、全局混入

Vue 一秒搞懂mixins混入相关推荐

最新文章

热门文章