Vue:mixin 混入

什么是mixin混入

• 功能：可以把多个组件共用的配置（如 data、methods、computed、watch、生命周期钩子等）提取成一个混入对象
• 作用：复用组件间的逻辑

mixin使用方式

• 定义混入

    const mixin = {
          data() {return {....}},
          methods: {....} ,
          mounted() {}
          .... 
     }

• 使用混入

  //全局混入
  Vue.mixin(xxx)
  //局部混入
  mixins:[‘xxx’]

   

示例

    <div id="app">
        {{name}}
        <button @click="showName">调用混合事件</button>
    </div>
    <script>
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示


        const hunhe = {
            methods: {
                showName() {
                    console.log('hunhe--showName--执行了', this.name);
                    alert(this.name);
                }
            },
            data() {
                return {
                    name: 'hunhe',
                    x: 1
                }
            },
            mounted() {
                console.log('hunhe--mounted--执行了', this.name);
            }
        }

        //全局混入
        Vue.mixin({
            methods: {
                showName() {
                    console.log('hunhe2--showName--执行了', this.name);
                    alert(this.name);
                }
            },
            data() {
                return {
                    name: 'hunhe2',
                    y: 2,
                }
            },
            mounted() {
                console.log('hunhe2--mounted--执行了', this.name);
            }
        })
        Vue.mixin(hunhe)//全局混入
        let vm = new Vue({
            el: '#app',
            data: {
                name: '张三',
                z: 3
            },
            methods: {
                showName() {
                    console.log('vm--showName--执行了', this.name);
                }
            },
            //mixins: [hunhe, hunhe2],// 局部混入 
            mounted() {
                console.log('vm--mounted--执行了', this.name);
            }
        })
    </script>

备注

• 组件优先
  组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先

  data
  methods
  

• 混入对象共用
  同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

  //都会执行（混入优先-组件）
  mounted()