vue-----mixins组件（一）

记录一下最近学习的小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)

页面使用无需再次引用