Vue 之 Mixins (混入)简单易懂

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

定义一个 mixin.js文件

const mixin ={
    data(){
        return {
            names: '李四',
            foo : 'abc'
        }
    }
}
export default mixin;

创建一个vue文件

import mixin from '../../static/js/mixin'
    export default {
      mixins:[mixin],
      data () {
        return {
        }
      },
      methods:{
      },
      created(){
        alert(this.names) //李四
        this.names = '张三'
        alert(this.names) //张三
      },
      mounted(){
        
      }
    }

在此vue文件中可以获取到mixind定义的变量了。多个页面引用修改变量的值不会影响原始值。

全局混合

1.创建一个mixin.js文件

import mixin from '../static/js/mixin'

2.main.js 入口文件引入

import Vue from 'vue'

Vue.mixin({
    data(){
        return {
            names: '李四',
            foo : 'abc'
        }
    }
})

3.页面使用

//  import mixin from '../../static/js/mixin'
    export default {
      name: 'Transtion',
//    mixins:[mixin],
      data () {
        return {
        }
      },
      methods:{
      },
      created(){
        alert(this.names) //李四
        this.names = '张三'
        alert(this.names) //张三
      },
    }

具体使用参考vue官方文档https://cn.vuejs.org/v2/guide/mixins.html