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>
