Mixin的使用

在组件化开发中，难免会有部分组件内部的部分逻辑是相同的，为了方便减少代码量，vue提供了混入(Mixin)的功能。

局部混入：

首先需要抽取要混入的内容，单独的放到某一个文件，通过导出的方式被其他组件引用。

demoMixin.js

export const demoMixin = {
  // 混入导出的文件中  可以书写vue实例下的所有属性   data   methods等等
  data(){
    return {
      msg:'我是通过混入实现的信息！'
    }
  },
  methods:{
    foo(){
      alert('混入实现的方法foo')
    }
  }
}

在需要混入的组件内部，先导入需要混入的对象，通过属性**minxins**来注册：

App.vue

<template>
  <h1>混入实现的消息：{{msg}}</h1>
  <button @click="foo">混入的方法</button>
</template>

<script>
import { demoMixin } from "@/13_Mixin(混入)的基本使用/mixins/demoMixin";

export default {
  name: "App",
  mixins:[demoMixin],// 需要混入的组件内部  通过该属性来接收要混入的信息
}
</script>

<style scoped>

</style>

最终上述代码实现的效果如下：

全局混入

​ 全局混入主要依靠vue实例app下的mixin方法进行混入，该方法接受一个对象参数；

main.js

import { createApp } from 'vue'
import App from './13_Mixin(混入)的基本使用/App.vue'
import { demoMixin } from "@/13_Mixin(混入)的基本使用/mixins/demoMixin";

createApp(App).mixin({
    ...demoMixin
}).mount('#app')

混入的属性与组件属性冲突时的合并规则

1. 钩子函数如create等重复时，两者都会保留并在合适的时机触发；
2. 值为对象（methods、computed等）时，会对内部的属性自动合并，都会被保留；如果内部属性存在重复的情况，则以组件内部的属性为主；
3. 数据对象data会被自动进行递归合并，存在冲突的属性时以组件内部的属性为主；