Vue组件：混入

1、基本用法

混入是一种为组件提供可复用功能的非常灵活的方式。混入对象可以包含任意的组件选项。当组件使用混入对象时，混入对象中的所有选项将被混入该组件本身的选项中。

语法格式如下：

<script>
//第一步：引用 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';

export default {
    //第二步：使用 mixin 对象
    mixins: [userMixin]
}
</script>

 

2、选项合并

（1）当组件和混入对象包含同名选项时，这些选项将以适当的方式合并。例如，数据对象在内部会进行递归合并，在和组件的数据发生冲突时组件数据优先。

（2）值为对象的选项，如：methods、computed 和 components 等，在合并时将被合并为同一个对象。如果两个对象的键名冲突，则取组件对象的键值对。

（3）同名钩子函数将混合为一个数组，因此都会被调用。另外，混入对象的钩子会先进行调用，组件自身的钩子会后进行调用。

3、综合实例

【实例】创建两个组件，这两个组件有相同的数据、方法、生命周期钩子，使用组件的混入方式实现功能。执行结果如下图：

（1）在项目中创建 mixins 目录，并创建 UserMixin.js 脚本文件

// 定义一个 mixin 对象，复用的公共代码
export const userMixin = {
    //数据
    data() {
        return {
            userModel: {
                userName: '',
                blogName: '',
                blogUrl: ''
            }
        }
    },
    //方法
    methods: {
        loadData: function () {
            this.userModel.userName = 'pan_junbiao的博客';
            this.userModel.blogName = '您好，欢迎访问 pan_junbiao的博客';
            this.userModel.blogUrl = 'https://blog.csdn.net/pan_junbiao';
        }
    },
    //生命周期钩子
    beforeCreate: function () {
        console.log("beforCreate");
    },
    created: function () {
        console.log("created");
    },
    beforeMount: function () {
        console.log("beforeMount");
    },
    mounted: function () {
        console.log("mounted");
    },
    beforeUpdate: function () {
        console.log("beforeUpdate");
    },
    updated: function () {
        console.log("updated");
    }
}

（2）创建 ComponentA.vue 组件，并引入和使用混入

<template>
    <fieldset>
        <legend>组件A</legend>
        <p>用户名称：{{ userModel.userName }}</p>
        <p>博客信息：{{ userModel.blogName }}</p>
        <p>博客地址：{{ userModel.blogUrl }}</p>
        <button @click="loadData">加载数据</button>
    </fieldset>
</template>

<script>
//第一步：引入 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';

export default {
    //第二步：使用 mixin 对象
    mixins: [userMixin]
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: red;
    margin-bottom: 20px;
}
</style>

（3）创建 ComponentB.vue 组件，并引入和使用混入

<template>
    <fieldset>
        <legend>组件B</legend>
        <p>用户名称：{{ userModel.userName }}</p>
        <p>博客信息：{{ userModel.blogName }}</p>
        <p>博客地址：{{ userModel.blogUrl }}</p>
        <button @click="loadData">加载数据</button>
    </fieldset>
</template>

<script>
//第一步：引入 mixin 对象
import { userMixin } from '@/mixins/UserMixin.js';

export default {
    //第二步：使用 mixin 对象
    mixins: [userMixin]
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
    margin-bottom: 20px;
}
</style>

（4）在 App.vue 根组件中引入两个组件

<template>
  <!-- 第三步：使用组件 -->
  <ComponentA></ComponentA>
  <ComponentB></ComponentB>
</template>

<script>
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';

export default {
  //第二步：注册组件
  components: {
    ComponentA,
    ComponentB
  }
}
</script>