前言
vue 中组件完成了样式和功能的综合复用,通过自定义指令完成了一部分功能的复用,本文总结一下混入在vue项目开发中提供的非常便利的功能复用。
正文
1、混入的分类
(1)全局混入
<div id="app">
<h1>我是app组件</h1>
</div>
<script>
// 全局混入
Vue.mixin({
created: function () {
console.log("全局混入");
}
})
new Vue({
el: "#app",
data() {
return {
}
},
methods: {
}
})
</script>
上面的代码中,vue.mixin方法中传入一个混入的对象,该对象为 created 钩子函数,在app组件加载过程中调用了该钩子函数,结果如下:
(2)局部混入
<div id="app">
<mix-item></mix-item>
<mix-item2></mix-item2>
</div>
<script>
// 局部混入
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
Vue.component("mix-item", {
mixins: [myMixin],
template: `<div>我是mix-item</div>`
})
Vue.component("mix-item2", {
mixins: [myMixin],
template: `<div>我是mix-item2</div>`
})
new Vue({
mixins: [myMixin],
el: "#app",
data() {
return {
}
},
methods: {
}
})
</script>
上面的代码中通过字面量的形式创建了一个对象变量 myMixin ,在两个子组件和 Vue(#app) 父组件中分别混入了这个对象,因此三个地方会调用该混入对象,首先app父组件调用,然后才是子组件调用,结果如下:
2、钩子函数的合并
<div id="app">
<mix-item></mix-item>
<mix-item2></mix-item2>
</div>
<script>
// 局部混入
var myMixin = {
created: function () {
console.log("我是混入的方法");
},
}
Vue.component("mix-item", {
mixins: [myMixin],
created() {
console.log("我是mix-item 的created方法");
},
template: `<div>我是mix-item</div>`
})
Vue.component("mix-item2", {
mixins: [myMixin],
created() {
console.log("我是mix-item2 的created方法");
},
template: `<div>我是mix-item2</div>`
})
new Vue({
mixins: [myMixin],
el: "#app",
data() {
return {
}
},
created() {
console.log("我是app组件的created方法");
},
methods: {
}
})
</script>
上面的代码中定义了一个myMixin的变量,在子组件和app父组件中都混入了该变量,同时每个组件内部也使用了该对象对应的钩子函数,同名的钩子函数出现时出现的结果如下:
注意:当组件和混入对象含有同名选项时,同名的钩子函数将合并为一个数组,因此都将被调用,但是混入对象的钩子函数将在自身组件钩子函数之前调用。
3、data对象的合并
<div id="app">
<mix-item></mix-item>
<mix-item2></mix-item2>
</div>
<script>
// 局部混入
var myMixin = {
data() {
return {
msg: "helloMixin",
}
},
}
Vue.component("mix-item", {
data() {
return {
msg: "helloMixin",
foo: "mix-item"
}
},
created() {
console.log("mix-item", this.$data);
},
mixins: [myMixin],
template: `<div>我是mix-item</div>`
})
Vue.component("mix-item2", {
data() {
return {
msg: "helloMixin",
foo: "mix-item2"
}
},
created() {
console.log("mix-item2", this.$data);
},
mixins: [myMixin],
template: `<div>我是mix-item2</div>`
})
new Vue({
mixins: [myMixin],
data: {
msg: "helloMixinApp",
foo: "fooo"
},
created() {
console.log("#app", this.msg);
console.log("#app", this.foo);
},
el: "#app",
methods: {
}
})
</script>
上面的代码中通过字面量的形式创建一个混入对象 myMinxin ,在父组件( #app )和两个子组件中分别混入了该对象,其中组件内部 data 对象和混入对象存在同名属性,结果如下:
注意:当混入对象为data数据对象时,数据对象会在组件内部进行递归合并,当混入对象和组件data同名冲突的时候,组件中的 data 会覆盖混入对象的 data 属性。
4、methods 对象的合并
<div id="app">
<mix-item></mix-item>
<mix-item2></mix-item2>
</div>
<script>
// 局部混入
var myMixin = {
methods: {
sayHello() {
console.log("hello myMixin");
}
}
}
Vue.component("mix-item", {
created() {
this.sayHello()
},
mixins: [myMixin],
template: `<div>我是mix-item</div>`
})
Vue.component("mix-item2", {
created() {
this.sayHello()
},
mixins: [myMixin],
template: `<div>我是mix-item2</div>`
})
new Vue({
mixins: [myMixin],
created() {
this.sayHello()
},
el: "#app",
methods: {
sayHello() {
console.log("hello app");
}
}
})
</script>
上面的代码中,定义了一个含methods属性的混入对象,在父组件(app)和两个子组件中分别混入该对象,其中组件内部存在和混入对象同名的方法时候结果如下:
注意:当混入对象属性为methods、cpmponents、directive 时,这些属性会在组件内部进行递归合并,当混入对象和组件内部属性同名冲突的时候,组件中的属性会覆盖混入对象的属性。
写在最后
vue中的混入提供了一种非常灵活的方式来分发组件中可复用的功能,很大程度上提高了代码的复用性,混入有点类似与继承,当子组件对象继承了父组件对象,一般情况下遵循就近原则,但是混入又不完全等同于继承,vue混入存在对不同配置的混入策略。
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。最后,大家国庆节快乐!!!