【vue混入（mixins）的使用方法】

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

定义mixins

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。

定义一个混入对象

//定义mixins
export const mixins = {
    components: {},
    data() {
        return {
            msg:'我是混入进来的'
        }
    },
    created() {
         console.log('我是混入进来的created生命周期')
    },
    mounted() {
    },
    computed() {
    },
    methods: {}
}

局部混入

把混入对象混入到当前的组件中，混入和组件引用方法一样

<template>
  <div class="about">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
// 引入mixins
import {mixins} from "@/mixins/mixins";

export default {
  mixins:[mixins],
  created() {
    //混入中定义的属性可以直接this.它就可以拿到
    console.log(this.msg)
  }
}
</script>

全局混入

全局混入则代表在项目的任何组件中都可以使用mixin

在main.js中添加

import {mixins} from "@/mixins/mixins";
Vue.mixin(mixins)

全局引入混入后将mixins的引入注释掉一样可以用

<template>
  <div class="about">
    <h1>{{msg}}</h1>
    <button @click="changemsg">改变mixins中的msg</button>
  </div>
</template>

<script>
// 引入mixins
// import {mixins} from "@/mixins/mixins";

export default {
  // mixins:[mixins],
  created() {
    //混入中定义的属性可以直接this.它就可以拿到
    console.log(this.msg)
  },
  methods:{
    changemsg(){
      this.msg = "我也能改变mixins的数据"
      console.log(this.msg)
    }
  }
}
</script>

混入存在的问题

混入的对象中的msg属性，和组件的msg属性冲突，以组件的值优先。组件中没有的属性，混入对象中的生效。

同名钩子函数将会合并成一个数组，都会调用，混入函数先调用

值为对象的选项，如methods，components，directives等，将会合并为一个新对象，如果键名冲突，组件的值优先