前言
个人学习过程中的记录,便于后续的复习使用,如果有错误或者更高的方法,希望看到的大佬指出
组件业务逻辑复用
常用的有三种,mixins
,HOC(高阶组件)
,Renderless组件
Mixins
Mixin是可以被一个子类或者一组子类轻松继承的类,目的是为了函数复用,可以全局注册Vue.mixin
,会影响到所有的Vue实例,也可以在单文件中使用mixins:[xx]
,如果Mixin和组件中出现同名的钩子函数,函数将会合并成一个数组,并且会在组件自身的钩子函数之前调用,而methods,components和directive将会合并成一个对象,如果出现重复的键名,则保留组件中的键值
利用mixin做一个插件
做一个很简单的插件意思一下,调用$notify可以弹出一个窗口,窗口信息为传入的参数
Vue.use(plugin)
Vue.use(plugin)
这一段代码应该都很熟悉,vuex,elementUI 等等都要使用这段代码安装插件,以便在vue中使用这些扩展的功能
下面的代码取自vue3,使用了ts书写,可以看出使用的插件需要提供一个PluginInstallFunction
函数或者install
对象
所以上述插件就很简单,下面直接贴代码,然后在main,js里面引入,然后Vue.use就行了,效果就不演示了,感兴趣的可以改造成alert自定义模板
import Vue from "vue";
const methods = {
$notify: function(template) {
alert(template);
},
};
function install() {
Vue.mixin({ methods });
}
export default { install };
缺点
打破了原有组件的封装,增加了组件的复杂度,而且可能出现命名冲突,并且只能对逻辑复用,不能对模板复用
renderless组件
由于hoc组件嵌套太深,组件复杂度高,调用起来很不方便,所以不太推荐使用,这里就不介绍了,所以直接介绍vue社区中用的比较多的renderless组件,可以将复用的逻辑沉淀在slot中,接口由插槽slot来暴露
slot
先了解一下插槽,插槽要讲的也不多,封装组件应该也经常使用,要讲的也就是如何在父模板中用子模板的数据,很简单,下面的代码演示了如何使用
//子组件 省略其他代码
<slot :data="data" name="context"></slot>
//父组件
<template v-slot:context="{ data }"
>{{ data.name }}
</template>
renderless
就举一个正则校验的例子吧
Renderless组件
<template>
<div>
<slot name="inputText" :validate="validate"></slot>
{{ errMsg }}
</div>
</template>
//methods
validate() {
let validate = this.rules.reduce((pre, cur) => {
let check = cur && cur.test && cur.test(this.value);
this.errMsg = check ? "" : cur.message;
return pre && check;
}, true);
return validate;
},
父组件
//ComMultiplexing 为引入的上面的组件
<com-multiplexing :rules="rules" :value="num">
<template v-slot:inputText="{ validate }">
<input type="text" v-model="num" @blur="validate" />
</template>
</com-multiplexing>
//。。。省略部分代码
data() {
return {
num: 1,
rules: [
{
message: "请输入至少一个数字",
test(value) {
return /\d+/.test(value);
},
},
],
};
},
v-slot
也可以直接写在com-multiplexing
上面 <com-multiplexing v-slot:inputText="{ validate }" ></com-multiplexing>
复用
如果需要复用,则可以将rules和num更换变量即可,并且也可以在此基础上再次封装
<com-multiplexing
v-slot:inputText="{ validate }"
:rules="rule"
:value="text"
>
<input type="text" @blur="validate" v-model="text" />
</com-multiplexing>
优点
符合依赖倒置原则,模板可以复用,不会出现命名冲突,复用的接口来源清晰