使用场景:
例如我们在 vue 单页面开发的时候当多个组件中都需要下拉刷新, 或者使用的都是一个方法的时候, 我们就可以使用 vue mixins 进行封装调用, 以及继承, 具体看代码.
选项合并
- var mixin = {data: function () {
- return {
- message: 'hello'
- }
- },
- created:function(){
- console.log('我是 mixins 中的 created')
- },
- methods:{
- show:function(num){
- console.log(num) //mixins 种的函数可以接收组件种的传参.
- },
- foo: function () {
- console.log('foo')
- },
- conflicting: function () {
- console.log('from mixin')
- }
- }
- }
- var vm = new Vue({
- mixins: [mixin],
- data: function () {
- return {
- title: 'def',
- message: 'goodbye'
- }
- },
- created: function () {
- console.log('我是 Vue 中的 created')
- console.log(this.$data)
- this.show(50); // 可通过函数传参, 把组件中需要的参数传给 mixins 进行使用.
- },
- methods:{
- bar: function () {
- console.log('bar')
- },
- conflicting: function () {
- console.log('from self')
- }
- }
- })
- vm.foo() // => "foo"
- vm.bar() // => "bar"
- vm.conflicting() // => "from self"
注意以下三点:
1, 当组件和混入对象含有同名选项时, 这些选项将以恰当的方式混合. 比如, 数据对象在内部会进行浅合并 (一层属性深度), 在和组件的数据发生冲突时以组件数据优先.
2, 同名钩子函数将混合为一个数组, 因此都将被调用. 另外, 混入对象的钩子将在组件自身钩子之前调用.
3, 值为对象的选项, 例如 methods, components 和 directives, 将被混合为同一个对象. 两个对象键名冲突时, 取组件对象的键值对.
全局混入
也可以全局注册混入对象. 注意使用! 一旦使用全局混入对象, 将会影响到 所有 之后创建的 Vue 实例. 使用恰当时, 可以为自定义对象注入处理逻辑.
- // 为自定义的选项'myOption' 注入一个处理器.
- Vue.mixin({
- created: function () {
- var myOption = this.$options.myOption
- if (myOption) {
- console.log(myOption)
- }
- }
- })
- new Vue({
- myOption: 'hello!'
- })
- // => "hello!"
来源: http://www.jianshu.com/p/c054835f86bb