vue2.x专题一 ---- mixins用法

在vue2.x中部分代码需要在多个组件中复用，我们可以使用混入 (mixin) ，这是一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1、全局混入：全局混入写在mian.js文件中，案例如下：

// 创建一个vue应用
// 1. 导入createApp函数
import { createApp } from "vue"
// 2. 导入根组件App.vue，
import App from './App.vue'
// 3. 基于根组件创建应用实例
const app = createApp(App)
// 全局混入 全局mixin
// vue2.0 写法  Vue.mixin({})
app.mixin({
    methods: {
      say () {
        console.log(this.$el,'在mounted中调用say函数')
      }
    },
    mounted () {
      this.say()
    }
  })
// 4. 挂载到index.html的#app容器
app.mount("#app")
// 导入全局css样式
// import './index.css'

2、局部混入：通过mixins选项进行混入

组件：

<template>
    <div class="son">
       子组件
    </div>
</template>

<script>
import { testMixins } from './mixins.js'
    export default {
        mixins:[ testMixins ]
    }
</script>

<style scoped>

</style>

封装的mixins.js文件：

export const testMixins = {
    methods: {
        say () {
          console.log(this.$el,'在mounted中调用say函数')
        }
      },
      mounted () {
        this.say()
      }
}

 看完的朋友，记得点赞评论收藏哦