vue的mixin的使用

1. 基础:
   1. 混入(mixin)提供了一种灵活的方式,来分发Vue组件中重复的功能
   2. 混入对象: 变量 ,对象,函数等,调用顺序按照混入顺序
   3. 混入选项冲突时以组件数据优先

      var mixin = {
        data: function () {
          return {
            message: 'hello',
            foo: 'abc'
          }
        }
      }
      
      new Vue({
        mixins: [mixin],
        data: function () {
          return {
            message: 'goodbye',
            bar: 'def'
          }
        },
        created: function () {
          console.log(this.$data)
          // => { message: "goodbye", foo: "abc", bar: "def" }
        }
      })

       

   4. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

      var mixin = {
        created: function () {
          console.log('混入对象的钩子被调用')
        }
      }
      
      new Vue({
        mixins: [mixin],
        created: function () {
          console.log('组件钩子被调用')
        }
      })
      
      // => "混入对象的钩子被调用"
      // => "组件钩子被调用"

   5. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

      var mixin = {
        methods: {
          foo: function () {
            console.log('foo')
          },
          conflicting: function () {
            console.log('from mixin')
          }
        }
      }
      
      var vm = new Vue({
        mixins: [mixin],
        methods: {
          bar: function () {
            console.log('bar')
          },
          conflicting: function () {
            console.log('from self')
          }
        }
      })
      
      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

       

2. 使用:
   定义一个或者多个混入文件

   export default {
   // 数据
     data () {
       return {
         currentForm: null
       }
     },
   // 注入
     inject: {
       resourceEntity: {
         // 函数式组件取值不一样
         default: () => {
         }
       }
     },
   // 方法
     methods: {
       getFormInstance (v) {
         this.resourceEntity().currentForm = v
       }
     }
   // ......
   }
   

   在需要混入的文件中接收

   <template>
     <div
       v-loading="loading.isLoading"
       class="schema"
     >
       <info-from
         ref="schema"
         :config="config"
         :modelData="entity"
         @getFormInstance="getFormInstance"
       />
     </div>
   </template>
   
   <script>
     import verificationMixin from 'verification.js'
     import mixin1 from 'mixin1.js'
     import mixin2 from 'mixin2.js'
     export default {
       mixins: [verificationMixin, mixin1, mixin2],
       props: {
         entity: {
           type: Object,
           default: () => {
           }
         }
       },
       data () {
         return {
           loading: { isLoading: false },
           schemaEntityHistory: [], // 存放schema的版本信息
       },
       methods: {
         // 获取历史版本号
         getVersions (isDropDown, row) {
           // 列表下拉，发送请求查看history
           if (isDropDown) {
             // 根据id查询数据集信息
             this.loading.isLoading = true
             this.serverApi({
               loading: this.loading,
               params: this.entity.oid,
               interface: this.$https.getHistorySchema,
               success: (res) => {
                 // 保存历史和版本号
                 this.schemaEntityHistory = res
               }
             })
           }
         }
       }
     }
   </script>
   

    

3. 注意：
   可以在Vue上面混入，但是影响很大，尽量少用