前言
我们在实际项目开发中,有很多基本相似功能模块,只是操作显示数据不同,很多逻辑和配置都是相同的
在Vue项目里,每个单文件组件都是一个模块组件,每个组件都有自己内部的数据和方法逻辑
如果每个单文件组件想要实现同样的功能
那么在每个单文件组件都要在逻辑业务代码里重复写一遍,这样在很多单文件组件内,到处都是从某一处复制粘贴过来的代码
在Vue当中,可以用封装组件来达到复用代码的目的,除了可以复用模板,那么逻辑,一些配置选项,是不是也可以公用?
当然是可以的,当只需要二次修改时,同样的逻辑的代码，只需要修改一处就可以了的
今天就来学习下Vue当中的这个mixin的,多个组件,当遇到相同的逻辑,是如何共用逻辑配置的
需求
假设:现在有两个不同的按钮组件ButtonA,ButtonB,点击它弹出组件自身不同的属性
用Vue-cli脚手架创建一个项目,在components文件夹下分别创建ButtonA.vue,ButtonB.vue两个组件
以下是ButtonA组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
export default {
name: "ButtonA",
data() {
return {
name: "itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>以下是ButtonB组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div>
<button @click="handleButton">按钮组件B</button>
</div>
</template>
<script>
export default {
name: "ButtonB",
data() {
return {
name: "video.itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
</style>
然后再App.vue当中引入两个ButtonA,ButtonB组件
<template>
<div id="app">
<ButtonA></ButtonA>
<ButtonB></ButtonB>
</div>
</template>
<script>
import ButtonA from "./components/ButtonA"
import ButtonB from "./components/ButtonB"
export default {
name: 'App',
components: {
ButtonA,
ButtonB
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
justify-content: center;
}
</style>经过上面的几行代码,可以实现我们想要的目的,但是你会发现,他们的功能逻辑都是一样的,定义的方法名也都是一样的
如果一个项目里,有很多个这样的组件,只要想改,那么所有的单文件组件都得手动的修改一次,毫无疑问,重复性的代码也比较多,比较分散
对于不同组件间同样的配置,能不能提取出来共用一份呢,在Vue当中,提供了mixin
什么是mixin
把多个组件共有的配置提取成一个混入对象,然后通过局部混入或者全局混入,以达到共用配置的目的,这就是mixin
官方文档: 混入 (mixin) 提供了一种非常灵活的方式，来分发 `Vue` 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
翻译一下: 将组件的公共逻辑或者配置(包括data,方法,生命周期,甚至props等)提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易，改一处即可,不用到处去每个组件内修改配置
注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。也就是说，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高
那么组件与组件之间还有重复部分，比如逻辑业务的复用,我们还可以使用Mixin在抽离一遍
以下是经过mixin改写过的
在src文件夹下创建一个mixin文件夹(这个文件夹下全部放入一些混入),创建一个popButton.js文件,创建一个对象,然后暴露出去,如下所示
export const popButton = {
// 这里面组件选项的配置都是可以的,生命周期等,data属性,计算属性,监听属性等
methods: {
handleButton() {
alert(this.name);
}
}
}然后再组件使用处引入即可,如下ButtonA组件,通过import引入,同时在组件配置选项中mixins:[引入的混入名],要是多个的话,用逗号分隔
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
import {popButton} from "../mixin/popButton.js"
export default {
name: "ButtonA",
mixins: [popButton],
data() {
return {
name: "itclan.cn"
}
},
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>这种在组件内部,通过minxins:[混入名称]`,也被视为局部混入
局部混入也就是只在当前组件内起作用,与按需加载有些相似,也就是需要用到`mixin`中的代码时，我们再在组件内引入它
而全局混入的话，则代表我在项目的任何组件中都可以使用`mixin`,从根组件下至到它的任何一个组件都会用到混入
