Vue.js 基础学习之混合mixins

Posted 2020-10-05 胡卓

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。

当混合对象与组件包含同名选项时，这些选项将以适当的策略合并。例如，同名钩子函数被并入一个数组，因而都会被调用。另外，混合的钩子将在组件自己的钩子之前调用。

我自己的理解是：混合就是将一些相似组件的相同部分用一个对象封装起来，实现代码的复用。当然如果在组件中重新定义某些东西就会覆盖掉来自混合的相应部分。

混合的使用：首先将公共部分写入一个对象，在组件中添加 mixins属性 ，并且这个属性的值是一个数组，数组中就是混合对象。

如：var base = {}; 在组件中: mixins : [base],

<div id="app">
        <show-hide-title></show-hide-title>
        <show-hide-content></show-hide-content>
    </div>

<script>
    var base = {
        data : function(){
            return {
                visible : false,
            };
        },
        methods : {
            show : function(){
                this.visible = true;
            },
            hide : function(){
                this.visible = false;
            },
            toggle :function() {
                this.visible = !this.visible;
            }
        }
    };
    Vue.component(‘show-hide-title‘,{
        template : `
        <div>
        <span @mouseenter=‘show‘ @mouseleave=‘hide‘>鼠标移入显示/移出隐藏标题</span>
        <h1 v-if=‘visible‘>这是标题</h1>
        </div>
        `,
        mixins : [base],
    });
    Vue.component(‘show-hide-content‘,{
        template :`
        <div>
        <button @click=‘toggle‘>显示/隐藏内容</button>
        <div v-if="visible">
        <p><a @click=‘hide‘ href="#">关闭内容</a></p>
        这是内容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quibusdam eligendi dolor, 
　　　　　　mollitia animi maiores, quod saepe dolores! Dolorum non porro iusto quod facere consequuntur 
　　　　　　dolorem reprehenderit, cumque reiciendis sit.
        </div>
        </div>
        `,
        mixins : [base],
    });
    new Vue({
        el: ‘#app‘,
    });
</script>

以上代码中两个组件一个是通过鼠标的移入与移出来控制标题的显示与隐藏，另一个是通过点击按钮来控制内容的显示与隐藏，他们有一部分公共内容用base封装起来，分别在两个组件中加入混合就可以了。