八.Vue3.x中的mixin介绍使用

1、新建mixin/base.js

const baseMixin = {
    data() {
        return {
            msg:"baseMixin Msg"
        }
    },
    methods: {
        success() {
            console.log("成功")
        },run(){
            alert("baseMixin run 方法")
        }
    },
}

export default baseMixin;

2、单独使用mixin, 在home.vue

<template>
<div>
    首页模板--{{apiDomain}}
</div>
</template>

<script>
import BaseMixin from '../mixin/base'
export default {
    mixins: [BaseMixin],
    data() {
        return {

        }
    }
}
</script>

3、全局配置mixin

main.js

import { createApp } from 'vue'
import App from './App.vue'
import BaseMixin from './mixin/base'

//原来的代码
// createApp(App).mount('#app')

//修改后的代码
const app=createApp(App);
//全局配置mixin
app.mixin(BaseMixin)

app.mount('#app');

home.vue组件内使用

<template>
<div>
    首页模板--{{apiUrl}}
    <button @click="success">执行Mixin里面的方法</button>
    <button @click="run">执行run方法</button>
</div>
</template>

<script>
export default {
methods: {
         // 如果混入的方法和当前页面中方法同名，优先使用当前的
        // run() {
        //     alert("Home.vue里面的run方法")
        // }
    }
}
</script>