vue之mixin使用

在看uniapp的元件源碼時，偶然發現官方在元件中使用到了【mixin】，在這記錄一下【mixin】的了解和使用。

// uniapp中使用的mixin
import message from './message.js';
......

export default {
	data(){
		return {
			config:config
		}
	},
	mixins: [message]
}
           

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

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入對象可以包含任意元件選項。當元件使用混入對象時，所有混入對象的選項将被“混合”進入該元件本身的選項。【即：不單元件本身，元件的model也可以複用】

當元件和混入對象含有同名選項時，這些選項将以恰當的方式進行“合并”。比如，資料對象在内部會進行遞歸合并，并在發生沖突時以元件資料優先。【即：合并發現同名，元件資料優先，mixin裡定義的資料在合并時被覆寫】

 局部使用mixin

//項目中定義一個js檔案,存放的是vue的model内容

export default {
  data(){
    return{
      name:'mixin'
    }
  },
  created(){
    console.log('mixin');
  },
  methods:{
    open(){
      console.log('mixin-open');
    }
  }
}
           

// 在元件中使用“混入”
<template>
    <div>
      <p>{{msg}}-{{name}}</p>
      <button @click="open">mixin</button>
    </div>
</template>

<script>
  import mixin from '../components/mixin'
    export default {
      name: "index",
      mixins:[mixin],
      data(){
          return{
            msg:'Text'
          }
      },
      methods:{

      }
    }
</script>
           

 全局使用mixin

// 同樣的，先定義一個js檔案

const mixins = {
  methods:{
    open(){
      let mixin = 'mixin';
      return mixin
    }
  }
}
export default mixins
           

// 在main.js中引入

import mixins from './components/mixin'

Vue.mixin(mixins)
           

// vue元件中使用

<template>
    <div>
      <p>{{msg}}</p>
      <button @click="open">mixin</button>
    </div>
</template>

<script>
  import mixin from '../components/mixin'
    export default {
      name: "index",
      mixins:[mixin],
      data(){
          return{
            msg:this.open()
          }
      },
    }
</script>