Vue混入mixins

Vue官网上介绍：

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

虽然平时没用过，但是这些方法对于想要开发一个好项目是非常有用的。

混入其实很简单，就是你mixins跟页面的初始化一样，有生命周期、有方法、有数据有过滤器等，反正页面有的mixins都有。

创建plugin.js：

export default {
    install:(Vue) => {
       

    }
}

main里面引入：

import plugin from './utils/plugin'
Vue.use(plugin);

之前说过了Vue.use，我们把接下来注册全局的方法都写在install里面。

全局注入：

Vue.mixin({
    data(){
        return{
            minData: 600,
            faMin: 1000
        }
    },
    mounted(){
        console.log('mixin mounted');
    },
    methods: {
        minMeth(){
            console.log('mixin methods minMeth');
        },
        conFaMin(){
            this.faMin = this.faMin + 500;
            console.log(this.faMin);
        },
        common(){
            console.log('mixin methods common');
        },
        minAlert(){
            this.faMin = this.faMin + 100;
            alert(this.faMin)
        }
    }
});

页面中：

data(){
  return{
    faMin: 700
  }
},
mounted(){
  this.minMeth();
  this.conFaMin();
  console.log(this.minData)
  console.log(this.faMin)
  this.common();
},
  methods: {
      common(){
          console.log('father methods common');
      },

faAlert(){
    this.faMin = this.faMin + 100;
    alert(this.faMin)
}
  }

 

<p @click="faAlert">父组件</p>
<p @click="minAlert">min组件</p>

对照着输出一个一个看，很容易理解混入的规则，生命周期是混入的先调用再调用父组件的，对象的比如methods等如果冲突就是以父组件的为主。

两个点击方法也表明，两者的数据是共享的。不过在不同父组件之间，并不能通过混入通信，mixins最大的作用就是把全局确定需要用到的方法或者是数据提取出来封装。甚至可以替代一小部分的vuex。

上面是全局混入，mixins还可以局部混入，在页面里面引入：

import mixins from '@/utils/plugin'

使用：

mixins: [mixins]

上面时候使用全局什么时候选择局部，这就要看项目的情形了。

欢迎关注Coding个人笔记 公众号