Vue知识点总结(22)——mixin混入技术（超级详细）

在web前端的发展中，组件化、模块化的思想一直在贯彻目前的技术发展。
组件的一大重要做用就是可复用，我封装完组件以后，能够在任何地方重复使用个人组件，不须要屡次开发。正所谓，一次封装，屡次使用。

然而组件和组件之间，其实也有不少的功能能够复用。

咱们简单举个例子，一个提示框组件，一个模态框组件。它们在展现形态上有所不一样，可是它们触发的机理基本同样，都是经过触发条件的出现，改变v-if的值，从而实现组件的展现。

也就是说，虽然它们两个组件间有逻辑重复的功能，这就能够进行复用，从而提升咱们的开发效率。

vue提供了一套可复用&组合的混入偷懒技术mixin。

为何叫它偷懒技术呢，由于复用原本就是为了“偷懒”，更加专一有效操做，将无效操做尽可能减小。

混入 (mixin) 提供了一种很是灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被“混合”进入该组件自己的选项。

先来个小例子，展现一下mixin的使用。

   <div id="app">
        {{msg}}
    </div>
    <script>
        const myMixin = {
            data () {
                return {
                    msg:123
                }
            },
            created () {
                this.sayHello();
            },
            methods: {
                sayHello(){
                    console.log('hello mixin');
                }
            }
        }

        new Vue({
            el:'#app',
            data:{
                title:'Ray'
            },
            mixins: [myMixin],
        });
    </script>

咱们写了一个局部组件myMixin，在一个实例化的vue中，咱们写了一个和data同级的mixins属性，以数组的形式放入咱们以前写的局部组件的名字。在这里也能够看出，mixins中能够放的不止一个组件，也就是说，咱们能够将咱们想复用的任何组件都放进入。

而后咱们看下页面的渲染。

它成功的执行了myMixin中的方法和钩子函数的内容。
这是mixin最基本的使用。

下面咱们以一个开发中的实际案例，展现一下mixin在实际开发中的使用。

const toggleShow = {
    data () {
        return {
            isShow:false
        }
    },
    methods: {
        toggleShow(){
            console.log("点击！");
            this.isShow = !this.isShow;
        }
    }
}
const Model = {
    template:`
        <div v-if='isShow'>
            <h3>模态框组件</h3>    
        </div>
    `,
    // 局部的mixin
    mixins: [toggleShow]
}
const Toast = {
    template:`
        <div v-if='isShow'>
            <h2>提示框组件</h2>    
        </div>  
    `,
    // 局部的mixin
    mixins: [toggleShow]
}
new Vue({
        el:'#app',
       data:{

       },
       components: {
           Model,
           Toast
       },
       template:`
        <div>
            <button @click='handleModel'>模态框</button>
            <button @click='handleToast'>提示框</button>
            <Model ref='model'></Model>
            <Toast ref='toast'></Toast>    
        </div>
       `,
       methods:{
           handleModel(){
               this.$refs.model.toggleShow();
           },
           handleToast(){
               this.$refs.toast.toggleShow();
           }
       }
    });
</script>

如今有一个局部组件Model为模态框，一个局部组件Toast为提示框。
它们看起来不同，用法不同，可是逻辑同样，都是切换v-if的boolean值。
而后咱们又写了一个局部组件toggleShow，这个组件就是被咱们重复复用的组件，用于提供模态框和提示框都须要的逻辑功能。

而且咱们在Model和Toast都经过 mixins: [toggleShow] 调用了这个被复用组件。

而后咱们在一个实例化的vue中使用一下这两个组件，而且给他们绑定ref属性，用于调用它们的toggleShow方法，实现展现的效果。

咱们看一下页面的实际渲染状况：

没有任何问题，经过咱们点击按钮，模态框和提示框都完成了相应的展现。
咱们实现了从toggleShow组件中抽离功能，分发给Model和Toast组件的效果。

这就是mixin在咱们实际的工做开发中的使用，仍是很是好用的，能够将组件中能够被复用的功能，继续抽离出来，分发给须要的组件。