mixins混入

因为在项目中 mixins(混合)特性使用频率是很高的 有必要熟练掌握 官方文档: mixins

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

值得注意的是：混入跟路由组件一样，啥都能使用，data,methods等等

基础使用

例：

在 src目录下新建mixins目录 再新建common.js文件

export const common={
    methods:{
      sayHello:()=>{
        console.log('hello1');
      }
    }
}

路由组件中使用

<template>
  <div class="home">
       混入测试
  </div>
</template>

<script>
import { common } from "../mixins/common.js"
export default {
    name: 'Home',
    data(){
        return{
            count: 0,
            isLoading: false,
        }
    },
    mixins:[common], // 引入混入
    mounted() {
        this.sayHello()
    },
}
</script>

这样就能在浏览器控制台看到打印内容，

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。