记录一下最近学习的小demo
混入 (mixin)：
分发组件中可复用的功能。
一个混入对象可以包含任意组件对象。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
1、在src文件下新建libs文件夹，内容如下
image.png
2、myDiv里面是组件内容
<template>
<div>
<div :class="['my-div',divStyle]">
<slot></slot>
</div>
</div>
</template>
<script type="text/javascript">
export default{
name: 'myDiv',
props: {
divStyle: {
type: String,
default: ''
}
},
data(){
return{
}
}
}
</script>
<style type="text/css" scoped>
.my-div{height: 100px;width:100px;background-color: #dddddd;color: #fff;}
.my-div.div-blue{background-color: blue !important;}
.my-div.div-red{background-color: red !important;}
.my-div.div-green{background-color: green !important;}
</style>
3、index.js来导出组件
import myDiv from './myDiv.vue'
export default {
components:{
myDiv
}
}
4、局部使用
<template>
<div>
<my-div :divStyle="divStyle">我的div</my-div>
</div>
</template>
<script type="text/javascript">
import myDiv from '@/libs/myUi/myDiv'
export default {
data(){
return{
divStyle: 'div-red'
}
},
mixins:[
myDiv
]
}
</script>
<style type="text/css" scoped>
</style>
5、main.js全局使用，
import myDiv from './libs/myUi/myDiv'
console.log(myDiv)
Vue.mixin(myDiv)
页面使用无需再次引用
