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