Vue cli mixin (混入)

1、功能

可以把多个组件共用的配置提取成一个混入对象

2、使用方式

a、创建混入(mixin.js文件)

import { computed } from "vue"

export const mixin = {
    methods: {
        showName(){
           alert(this.name)
        }
    },
    data() {
        return {
            
        }
    },
    computed:{

    },

}

b、使用混入

局部

<script>
    // 引入
    import {mixin} from '../mixin'
    export default {
        name:'StudentData',
        data() {
            return {
                name:'jojo',
                sex: 'male',
            }
        },
/*         methods: {
            showName(){
                alert(this.name)
            }
        }, */
        // 使用
        mixins:[mixin],
    }
</script>

全局 main.js中

import {mixin} from './mixin'
Vue.mixin(mixin)

3、一般Vue属性和方法，组件的权重大于mixin.js中的，但是生命周期钩子是个例外，都执行