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