1.vue中,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元,并在使用时根据一定的策略合并到组件的选项中,使用时和组件自身的选项没有区别.
2.mixin中比较重要的两个方法: Vue.extend() 和 extend()
3.Vue.extend(): 是基础的Vue构造器,参数是一个包含组件选项的对象(组件选项包括data, props, computed, methods等等), 可以显示的扩展组件和混入对象
4.全局混入将对所有的Vue实例均有效,不推荐使用,但是在编写一些Vue插件的时候会用到,例如Vuex的源码中就使用了全局的mixin全局混入$store对象
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<child></child>
</div>
</body>
<script>
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var child = Vue.extend({
template:'<div></div>',
mixins: [myMixin]
})
let app = new Vue({
el:"#root",
components:{
child
}
})
</script>
</html>
4.extend(): 是对象的合并方法,参数是合并的源对象和目标对象,用于对象的合并,用法为: extend(target, source)表示source对象将合并到target对象上,作用类似Object.assign()方法
(当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。)
案例
<script>
// 定义一个混入对象
var myMixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
// 定义一个使用混入对象的组件
new Vue({
el:'#root',
mixins: [myMixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
</script>
(同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。)