什么是mixin
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
比如,UI组件就是一个很有代表性的可复用的组件,所以今天就写一个mixin做的button组件。
项目开始
比如说我要在App.vue中使用一个button按钮。为了项目整体同一,并且高复用,就需要把button抽离成一个组件。
/src/App.vue
可以使用mixin,将button组件引入即可
/src/App.vue
那么问题来了,这里面的myUI是什么呢,如何编写button组件呢
vue规定,一个混入对象可以包含任意组件选项。比如data ,hooks, methods ,components等等。
这里我们就是需要components这个属性 , 将写好的button组件放在components中,这样mixin注入的时候,components属性会自动挂载到vue实例中去。
/src/lib/index.js
如何编写button组件:
<template>
//使用插槽将button的内容插进来
//用props也可以,但是我觉得用插槽语义更明确,使用时也更符合日常写法
//类可以用数组罗列,my-btn是初始化类名必须要有
//btnStyle是传进来的属性 用法类似于bootstrap
<button v-bind:class="['my-btn',btnStyle]"><slot></slot></button>
</template>
<script>
export default {
name: 'MyBtn',
props:{btnStyle:String},
}
</script>
<style>
.my-btn{
height: 36px;
/* width: 60px; */
background-color: #fff;
border: 1px solid black;
}
.my-btn.btn-primary{
background-color: skyblue;
}
.my-btn.btn-danger{
background-color: red;
}
.my-btn.btn-warning{
background-color: gold;
}
</style>
整体的项目架构
myUI文件放的都是UI组件,然后配置到/libs/index.js
中的components中去。
小技巧
如果项目大量的用到了ui组件,显然,每个vue组件里面都配置是很麻烦的。
所以可以在main.js
中配置,这样所有的vue组件都不需要在配置了
引入mixin对象,再用Vue.mixin()使用即可