vue中mixin的用法

分为全局混入和局部混入

• 局部混入

  // 抛出混入对象
  export const mixin={
      data(){
          return {
              number:1
          }
      }
  }
  ​
  --------------------------------------------------------
  // 引入混入对象
  <template>
      //这里读的值其实是mixin的值，因为这个时候mixin已经混入到vue实例中了
      <div>page1的值是:{{number}}</div>
  </template>
  ​
  <script>
  //引入mixin.js
  import {mixin} from "./mixin/mixin"
  export default {
  //这里注意：属性名为mixins，值为数组类型
    mixins:[mixin],
    data () {
      return {
       
      }
    },
  }
  </script>
  ​
  <style scoped>
  ​
  </style>
  

• 全局混入

  import Vue from 'vue'
  import App from './App'
  import router from './router.js'
  import mixin from "./mixin/mixin.js"
  Vue.config.productionTip = false
  Vue.mixin(mixin)
  ​
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  

• mixin可以定义公用的变量或方法，但是mixin中的数据是不共享
• 混入值为函数：合并，先执行mixin中的函数
• 混入之是对象：覆盖mixin对象