Element组件引发的Vue中mixins使用,写出高复用组件

news/2025/2/12 19:01:25

我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子。所以你会发现它都是围绕组件展开的。

我们就来说说如何创建一个灵活的高复用的组件。之前分享过一篇「slot」内容分发的文章,它可以让我们组件的内容更加的灵活。有兴趣的可以看下。

《Vue一个案例引发「内容分发slot」的最全总结.md》

今天主要分享的是组件中另一种分发,功能的分发「mixins」,也叫混入。在开始之前呢,我们先看个案例,先从案例中看出个大概,然后带着问题去学习知识点会更加的高效,这也是我个人比较常用的学习方式。

在 Element(一款优秀的组件库)中有这么两个组件MessageBox 与 Dialog。


官方说法:

从场景上说,MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。

所以你会发现,这两个组件非常的相似,他们共享一些相同的基本功能,如:打开/关闭之间的状态切换。但用法上又各有不同。请看下面的例子

// Message Box
<template><el-button type="text" @click="open">打开 Message Box</el-button>
</template>
<script>export default {methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'})}}}
</script>// Dialog
<el-button type="text" @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog:visible.sync="dialogVisible"><span>这是一段信息</span>
</el-dialog>
<script>export default {data() {return {dialogVisible: false};}};
</script>

相似的组件,相同基本功能,这时你不得不做出选择,是将它们分成两个不同的组件?还是只保留一个?

显然这两种做法都不完美,如果分成两个组件,后期有功能的变动话,就会去修改多次,带来维护成本。如果保留一个,但是用法上又各有不同,这可怎么办呢?

有同学也会有疑问,不就两个组件吗?能带来多少维护成本?其实不仅如此,类似于这种状态切换的功能还有提示框,弹出框等等。

所以 Vue 给我们提供了一种方案叫功能的分发「mixins」。

什么是 Mixins

官方说法:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

简单来说就是可以让不同的组件「共用」某个功能。

Mixins 对象可以包含 Vue 实例中的所有选项,当组件使用 Mixins 对象时,Mixins 对象中的所有选项将和组件中的选项进行合并。

既然如此那我们就来尝试用 Mixins 对象 去修改上面两个组件。让它们可以共用一个方法。以下组件都是自己书写的简单实现,只实现状态切换的基本功能。

//mixins.js
export const showMixin = {data: function () {return {isShowing: true};},methods: {toggle() {this.isShowing = !this.isShowing;}}
}//MessageBox
<template><div class="panel-box">//省略</div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {name: "MessageBox",mixins: [showMixin]
};//DialogBox
<template><div class="panel-box">//省略</div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {name: "DialogBox",mixins: [showMixin]
};
</script>

可以看到,我们把两个组件的相同功能给剥离出来,采用 mixins 对象的方式然后在组件中引入即可,这样以来组件就会有更好的灵活性。

有聪明的小伙伴应该就会有疑问了,如果 mixins 对象中的选项和组件实例中的选项相同时会怎么办?这也是我们下面要说到的问题,Vue 中给出了我们几个决策机制,一起来看看。

选项的合并

  1. data 对象的合并

当组件与混入对象的 data 对象发生冲突时,以组件中的优先,如何没有冲突将会进行递归合并。

const mixin = {data: function() {return {hero: "蛮三刀",text: "来自mixins中的「上单一霸」"};}
};
export default {name: "DialogBox",mixins: [mixin],data() {return {text: "来自组件中的「上单一霸」"};},mounted() {console.log(this.$data); // {hero: "蛮三刀",text: "来自组件中的「上单一霸」"}}
};
  1. 钩子函数的合并

钩子函数将会被全部调用,因为同名钩子函数将会被合并成一个数组,但 mixins 中的钩子会优先于组件中的钩子执行。

const mixin = {created() {console.log("mixins中的上单一霸");},mounted() {console.log("mixins中的中单一霸");}
};
export default {name: "DialogBox",mixins: [mixin],created() {console.log("组件中的上单一霸");},mounted() {console.log("组件中的中单一霸");}
};
//mixins中的上单一霸
//组件中的上单一霸
//mixins中的中单一霸
//组件中的中单一霸

3.值为对象类型的合并

像methods、watch等值为对象类型的会合并成一个对象,如有冲突将采用组件中的。

const mixin = {methods: {say() {console.log("mixins组件上单一霸");},do() {console.log("mixins偷塔");}}
};
export default {name: "DialogBox",mixins: [mixin],methods: {say() {console.log("组件上单一霸");}},mounted() {this.say(); //组件上单一霸this.do(); //mixins偷塔}
};

通过上面一些案例的解释,你应该熟悉了如何利用 混入对象去创建一个高复用组件了,不妨去尝试一下。

最后,希望大家能够有所收获。如果你觉得本文不错欢迎点赞转发。

关注微信公众号:六小登登,学习更多干货文章,领取全套学习资源。


https://dhexx.cn/news/show-1308856.html

相关文章

你从未用过的 10 条 Linux 命令?

文字来源于http://linuxtoy.org/archives/10-linux-commands-youve-never-used.html Brock 老兄写了一篇文章《你从未用过的 10 条 Linux 命令&#xff08;10 Linux commands youve never used&#xff09;》&#xff0c;虽然标题有点过于绝对和主观&#xff0c;不过文章还是不…

[翻译]asp.net 2.0中通过压缩ViewState改善性能

原文地址&#xff1a;http://www.dotnetbips.com/articles/22d33d11-1a75-42c8-bbf6-ca1a345d3fcf.aspx[原文][翻译]asp.net 2.0中通过压缩ViewState改善性能原文发布日期&#xff1a;2007.03.08作者&#xff1a;Bipin Joshi翻译&#xff1a;webabcd介绍开发人员经常担心他们we…

python-05

去除空格方法一&#xff1a;使用字符串#!/usr/bin/env python whitespace \t\n\r\v\fdef myStrip(chs): passdef myLstrip(chs): if len(chs) 0: return chs strlen len(chs) for i in range(strlen): if chs[i] not in whitespace: break else: return return chs[i:]def …

What is the difference between data mining and machine learning?

http://www.google.com.hk/search?hlzh-TW&clientfirefox-a&hsK3s&rlsorg.mozilla%3Azh-TW%3Aofficial&qdifferencebetweendataminingandmachinelearning&aqf&aqig1&aql&oq

Activity Monitor 闪退 无法进入睡眠

Activity Monitor 闪退 & 无法进入睡眠 情况描述 黑苹果主机突然无法进入睡眠。 考虑到可能是后台程序阻碍了系统正常进入睡眠&#xff0c; 于是想要通过Activity Monitor查看系统的活动情况&#xff0c;然而&#xff0c;Activity Monitor闪退。 重新开机&#xff0c;快速…

Effective C++ 第二版 29)内部句柄 30)成员函数返回非const指针或引用

类和函数: 实现 C是高度类型化的语言, 给出合适的类和模板的定义以及合适的函数声明是整个设计中最大的一部分; 这部分做好, 类, 模板以及函数的实现就不容易出问题; 人们常常犯错的原因是不小心违反了抽象的原则: 让实现细节可以提起类和函数内部的数据; 不清楚对象生命周期; …

男人眼泪中的Ruby(二)

等待今天宿舍的小八提出来要考 DBA &#xff0c;这个勾起了我的思绪。To be a DBA or to be a Programmer its a questions。其实我个人比较倾向去做程序设计&#xff0c;可是综合考虑到我的性格&#xff0c;感觉自己做DBA更合适一点。下午看了一下 Oracle Certified Administr…

Shell编程基础 part 1/2

SHELL编程基础 shell脚本, 必须在开始的第一行输入: 1#!/bin/bash>#! 会告诉系统执行该脚本的程序, 例如bash; Note 最好使用"!/bin/bash"而不是"!/bin/sh", 如果使用tc shell改为tcsh,其他类似. 保存文件后, 想要执行脚本, 必须先使它可执行: 1chm…

oracle导入导出数据

一、本地导入导出 导出&#xff1a;exp 用户名/密码 file文件路径 owner用户名。 例&#xff1a;exp YGTZ/YGTZ fileD:/danchu.dmp owner YGTZ 导入&#xff1a;imp 用户名/密码 file文件路径 fully 例&#xff1a;imp YGTZ/YGTZ fileE:/daochu.dmp fully 注&#xff1a;在cmd…

关于SQL SERVER的ROWCOUNT关键字(转载)

因为仰望ORACLE&#xff0c;所以一直都以为SQL SERVER很笨。 据传SQL 2005有了RowID的东西&#xff0c;可以解决TOP排序的问题。可惜还没有机会体验。在SQL 2000中写存储过程&#xff0c;总会遇到需要TOP的地方&#xff0c;而一旦遇到TOP&#xff0c;因为没办法把TOP后面的数字…