vue项目中使用mixins详解

一，混入mixins

1-1，什么是mixins?

混入（mixins）是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins可以简单理解成常见函数封装，也可以进行一些业务逻辑的拆分，组合。也有一定的风险。

1-2，混入方式

组件按需混入，全局混入。

二，结构

//定义一个混入对象js

var myMinxins={
   data(){
     return{
     }
   },
   created(){},
   mounted(){    
   },
   methods:{
    hello(){
  console.log('hello from mixins');
}
   }
}



//定义一个使用混入对象的组件

var Component=Vue.extend({
 mixins:[myMinxins]
})

 

三，选项合并

3-1混入的data中，健名相同，则读取组件中的键名，反之则读取混入键名；

1）键名相同

 两个键名相同（msg）,则只会读取组件中的键名 ：

2） 键名不同

  两个键名不相同,则会读取调用的键名 ：

3-2，钩子：同名钩子函数将混合为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

先输出混入对象的钩子： 

3-3，值为对象的混入：如methods,components等，选项会被合并，组件对象覆盖混入对象。

调用的方法名一样，组件对象覆盖混入对象 的方法：

四，全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

在main.js引入： 

import tableLoadData from "@/mixins/tableLoadData"

Vue.use(tableLoadData ) 

谨慎使用，它会影响Vue实列（包括第三方组件）

全局混入

immediate:true

deep:true

官网：https://cn.vuejs.org/v2/guide/mixins.html