【Vue】Mixin 混入

Vue Mixin 混入

1.简介

混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项 (如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项

2.基本使用

2.1 定义混入

首先,在混入中定义的往往是可复用的内容,因此,一般会单独建立一个文件夹 mixin,专门用于存放混入文件。

js 复制代码
let testMixin = {
    created() {
        console.log("这是testMixin中的created方法!");
    },
    methods: {
        hello() {
            console.log("hello from testMixin!");
        }
    },
}

export default testMixin

2.2 使用混入

此时,在主页组件 index.vue 中,没有定义任何的 created、methods 或 mounted等,但是此时打开控制台:

说明此时执行了混入中定义的 created 方法!

此时,再为主页组件加上 mounted 生命周期钩子,并在其中使用this.hello()

控制台打印出的结果为:

即成功执行了混入对象中定义的方法 hello(),也验证了当前组件中合并了混入对象中定义的选项和方法。这就是混入的基本使用。

2.选项合并

当组件和混入对象含有同名选项 时,这些选项将以恰当的方式进行"合并"。数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

仍然使用上面的例子,我们在混入对象 testMixin 中,已经定义了一个方法 hello()。那么如果此时我们在主页组件中再定义一个 hello() 方法,mounted 中执行的会是哪一个 hello() 呢?

最终,控制台打印结果如下:

此时,同名的 created 生命周期钩子进行了合并 ,合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用

而 methods 中的 hello 方法因为冲突,在合并时保留组件中的hello,即优先当前组件的选项,因此打印的是"hello from home!"。

3.可复用性与全局混入

3.1 可复用性

开篇提过,混入对象可成为一个可复用功能,我们在另外的组件中引入已定义的混入对象,可实现同样的逻辑与功能。

那么有个问题,如果很多个组件同时使用同一个混入对象,这时候都要重复一个步骤,就是先导入混入对象,然后再使用,类似如下:

js 复制代码
<script>
import myMixins from "../mixins";
export default {
  mixins: [myMixins]
};
</script>

这样未免有点繁琐,且代码冗余,此时我们可以使用全局混入来优化这个问题。

3.2 全局混入

在 Vue 中,混入也可以进行全局注册

例如这里,我们在 main.js 中通过Vue.mixin()引入混入对象,后续即可全局使用(作用于该Vue实例下的所有组件

然后在主页组件中,将我们原来引入混入的代码删除:

此时刷新页面,查看控制台输出信息:

仍然执行了混入中的方法!其效果与在每个组件中单独引入混入对象相同,这便是全局混入。

请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

相关推荐
小白学大数据2 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617711 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543239 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test41 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web