混入的认识
混入是一种代码的组织方式, 可以在多个组件间横向复用代码.
定义混入对象,只要将混入对象添加到组件中,那么该组件就可以获取到存储在混入对象中的任何东西.
1. 混入的基本使用
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
示例
<div id="app">
<!-- 使用组件 -->
<my-component></my-component>
</div>
<!-- 组件模板 -->
<template id="mycomponent">
<div>
{{ msg }}
<button @click="getInfo">点击执行混入方法</button>
</div>
</template>
<script>
// 定义混入对象
let mixin = {
data(){
return {
msg:"混入"
}
},
methods:{
getInfo(){
console.log("混入方法")
}
}
}
// 组件选项对象
let MyComponent = {
mixins:[mixin],
template: `#mycomponent`,
};
// 实例中注册组件
const vm = new Vue({
el:"#app",
data:{},
components: {
MyComponent
}
})
</script>
显示结果
混入.png
Vue已经自动将混入对象里的内容添加到组件中去了, 或者可以说是混入到组件内了
混入对象可以引用几乎任何Vue组件所能引用的东西, 就好像他是组件本身的一部分
2.混入对象与组件选项合并
如果混入对象和组件间有重复的选项,如果重名的方法或者都有同一个生命周期的钩子函数,根据他们的类型,Vue会区别对待
2.1 数据对象合并
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
示例代码如下:
<script>
// 定义混入对象
let mixin = {
data() {
return {
message: 'hello',
foo: 'abc'
}
}
}
// 组件选项对象
let MyComponent = {
mixins: [mixin],
template:"<div></div>",
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
created(){
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
};
// 实例中注册组件
const vm = new Vue({
el: "#app",
data: {},
components: {
MyComponent
}
})
</script>
显示结果：
混入后组建的数据.png
2.2 钩子函数
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
示例
<script>
// 定义混入对象
let mixin = {
created(){
console.log("混入中的created");
}
}
// 组件选项对象
let MyComponent = {
mixins:[mixin],
template:"<div></div>",
created(){
console.log("组件中的created");
}
};
// 实例中注册组件
const vm = new Vue({
el:"#app",
data:{},
components: {
MyComponent
}
})
</script>
钩子函数混入.png
当组件被创建时,mixin中的钩子函数和组件中的同名钩子函数都会执行
2.3 方法，计算属性等合并
值为对象的选项，例如methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
通俗的说,就跟data中数据一样,重名的就用组件的覆盖混入对象的方法
<script>
// 定义混入对象
let mixin = {
methods: {
getInfo() {
console.log("混入中的getInfo");
}
}
}
// 组件选项对象
let MyComponent = {
mixins: [mixin],
template:"<div></div>",
mounted(){
this.getInfo()
},
methods: {
getInfo() {
console.log("组件中的getInfo");
}
}
};
// 实例中注册组件
const vm = new Vue({
el: "#app",
data: {},
components: {
MyComponent
}
})
</script>
hunru2.png
当组件创建时,只有组件中的方法执行了, 因为组件中的方法把混入方法覆盖了
