第十八篇 Mixins - 混入使用

         mixins (混入) 是一种分发Vue组件中可以复用功能，是一种非常灵活的方式，混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项；暂时还没有到使用项目的时候，先进行对 mixins 一个基本的使用和掌握。

Mixins

        下面我们做一个简单的事件处理；用button按钮，点击的时候触发事件；那么就是button绑定一个handleClick的点击事件，紧接着在methods当中来完成相应的事件处理；如下：

    点击

        那么现在是将这个handleClick的方法分别也让其他页面去使用它，那么handleClick就应该外边来，然后在methods中去用这个方法；如下：

    点击

        上述代码可以看出只要我们想让其他页面使用，写在外面即可，然后在methods去写对应的事件用就可以了，那可以将外边的结构跟里面的一样就可以，就可以不用在methods中去一个一个写handleClick : handleClick 这种，可以这样来写，如下：

    点击

        那么如何去使用到 obj 当中的methods方法，就是这篇内容的主角Mixins，将obj这个对象混入去使用，在其他页面使用的时候也可以通过混入使用到obj对象当中的methods方法，在这里就不讲在项目当中的使用，后续有的话会讲，这里主要是对mixins有基本的了解和掌握就可以了，那么如何混入呢？如下：

    点击

以上就是对混入的一个基本掌握！

Mixins 就近原则

        那么在使用 mixins 当中难免会出现什么样的问题呢？在混入的页面当中已有该方法(方法名称相同但事件处理的内容不同)，那么mixins是如何来处理的？来实践一下：

    点击

         实践证明mixins会执行自身methods中的handleClick方法而不是执行mixins中的方法，使用mixins造成同名函数方法的时候，页面是会采用"就近原则"，它会用自身的methods，而不是mixins中的methods方法，跟自身的methods比较的亲！

Mixins - 混入 computed / data

        尝试混入了methods，那么这会就有人开始想了，那么computed 计算属性的内容呢？data 中的数据呢？答案是可以混入的。

    点击
	
Mixins中的data -- userName：{{userName}}
	
Mixins中的computed -- getInfo：{{getInfo}}

         这篇的内容就到此结束了，本篇内容记录的是mixins的一个基本使用以及掌握mixins的一些基本知识点！附上官方文档： Mixins — Vue.js