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>