21.mixin混入详解

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用

App页面

<template>
  <div class="app">
  </div>
</template>
<script>
  import mixin from "@/mixins/mixin";
  export default {
      name: "App",
      mixins: [mixin],
      data() {
        return {
          a1: "1",
          a3: "3"
        }
      },
      created() {
        console.log("App created ",this.a1)
        console.log("App created ",this.a2)
      }
  }
</script>

mixin.js

export const mixin = {
    methods:{
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好啊")
    }
}
export const mixin2 = {
    data() {
        return {
            x:100,
            y:200
        }
    }
}

结果图：

 由此我们可以知道混入对象的钩子将在自身钩子之前调用，且mixin中能够打印出App中a3的值

2.普通方法合并

当混合值为对象的选项时，例如methods、components、directive，将被混合为一个对象，两个对象键名冲突时，取组件对象的键值对

APP页面

<template>
  <div class="app">
  </div>
</template>
<script>
  import mixin from "@/mixins/mixin";
  export default {
      name: "App",
      mixins: [mixin],
      data() {
        return {
          a1: "1",
          a3: "3"
        }
      },
      methods: {
        test: function() {
          console.log("App test")
        }
      },
      mounted() {
        this.test()
        this.test2()
      }
  }
</script>

mixin.js

const mixin = {
    data() {
        return {
           
        }
    },
    methods: {
        test: function() {
            console.log("mixin test")
        },
        test2: function() {
            console.log("mixin test2")
        }
    },
}
export default mixin;

3.局部混入

组件

<template>
	<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
	mixins: [mixin],
    data() {
      return {
      }
  },
	mounted() {
		this.mixinMethod()
	}
}

mixin

const mixin = {
    data() {
      return {
        msg: "hello"
      }
    },
    methods: {
      test1() {
        console.log("mixin ", this.msg)
      }
    }
  }
  export default mixin;

4.全局混入

在main.js加入以下代码

Vue.mixin({
    data() {
        return {
            msg: "hello"
        }
    },
    methods: {
        test1() {
            console.log("mixin test1")
        }
    }
})

在组件中直接引用

<template>
    <div>{{ msg }}</div>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        mounted() {
           this.test1()
        }
    }
</script>

5.总结

（1）功能：可以把多个组件共用的配置提取成一个混入对象

（2）使用方式：

        第一步定义混合：

        {

                data() {...},

                methods: {...}

        }...

        第二步使用混入：

                全局混入：Vue.mixin(xxx)

                局部混入：mixins:['xxx']