在vue2的时候常用的代码混入是mixin,到vue3用CompositionAPI实现
局部混入:
在目录下创建一个mixins文件夹,通过一个js文件返回需要混入的代码
export const demoMixin = {
data(){
return {
message: "这是mixin"
}
},
methods: {
foo(){
console.log("点击了mixin的方法");
}
},
created(){
console.log("这是mixin的生命周期");
}
}
组件直接导入
import { demoMixin } from "./mixins/demoMixin"
export default {
name: 'App',
// 开启混入
mixins: [demoMixin],
data(){
return {
name: "ssl",
// 会覆盖mixin里重复的,内部>局部混入>全局混入
message: "这是组件的message"
}
},
methods: {
// 会覆盖mixin里重复的
// foo(){
// console.log("这是组件的function");
// }
},
// 会和mixin里一起推入数组,到时候依次执行
created(){
console.log("这是组件的生命周期");
}
如果需要全局都混入的话需要在main.js操作
const app = createApp(App)
app.mixin({
data(){
return {
message: "这是全局的混入"
}
}
})
app.mount('#app')
注:组件代码>局部混入>全局混入