vue3+ts学习(二十三):vue2的代码混入mixin

22 阅读1分钟

在vue2的时候常用的代码混入是mixin,到vue3用CompositionAPI实现

image.png

局部混入:

在目录下创建一个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')

注:组件代码>局部混入>全局混入