vue--mixins

混入(mixins) 是一种分发Vue 组件中可复用功能的非常灵活的方式

 

 mixins主要用在以下两个方面:


 

当做完一个项目,想好好放松的时候,突然有新需求

为了不污染完美的构造函数,在构造函数外面定义一个mixins,这就是它的作用之一


 

一个项目中会经常会有公共的方法,这些公共的方法不想全都写在构造函数里

这时候就可以构造函数外面定义一个mixins,需要时就可以调用它


 

 

首先在构造函数外面定义为:

var countConsole = {
   updated () {
     console.log(this.count)
   }
}

这里的updated是钩子函数,并不是自定义的函数

接下来需要在构造函数里注册这个mixins

注意这个mixins是一个数组,也就是可以定义多个mixins对象

mixins: [countConsole],

可以看到在控制台里依然可以输出累加的count数据。这个输出的操作是在构造函数外操作的

 

问题1:如果在构造函数里也定义了updated,那么哪个优先级更高呢

在mixins里做下改动

var countConsole = {
   updated () {
     console.log(this.count+”这里是mixins里的内容”)
   }
}

在构造函数里做如下操作,加入钩子函数:

updated () {
     console.log(”这里是原生里的内容”)
}

可以看到,mixins里的优先级是比构造函数的优先级高的

 

问题2:如果加入全局的updated的话,谁的优先级更高呢

首先引入vue

import Vue from 'vue'

再下来编写全局的updated:

Vue.mixin({
   updated () {
     console.log('这是全局内容')
   }
})

可以看到优先级的排列是:

  1. 全局

  2. 局部mixin

  3. 构造函数

 

问题3:在mixins里定义一个methods,再在构造函数里定义一个methods

如果命名重复,会发生什么情况呢

首先们在DOM里加入触发按钮:

<button @click=”bar”>提交</button>
//在mixins里加入methods
methods: {
     bar() {
       console.log('hello World')
     }
}

在构造函数里加入methods

methods: {
     bar() {
       console.log('hello meow')
     }
}

会发现,在控制台里输出的是hello meow

如果methods里命名重复的话,只会执行构造函数里的函数,而不执行mixins里的函数

所以在mixins里定义函数时,不要与构造函数里的一样,这样会被构造函数里的函数覆盖的

 

原文链接:https://mp.weixin.qq.com/s/k35fObc85hK1lXLljSl20A

posted @ 2018-12-29 16:34  阿猫nieo  阅读(266)  评论(0编辑  收藏  举报