1.前言
1.一切反动派都是纸老虎
2.之前没怎么用这个混入 心理上就觉得挺难,其实看看也就不过如此
3.这也是初心,帮助自己克服这种纸老虎的心理,也顺便记录下自己突破的过程,N年后来看,当时写的真球搓,也希望大家都觉得这写的是啥呀,还不如我
- 万事开头难,但是最好的开始永远是现在,
共勉
2.混入-mixin
2.1官方概念
混入 (mixin)提供了一种非常灵活的方式，来分发 Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项
2.2 理解
- 首先其实这个混入也属于一种设计模式
- 场景
我们平常写的很多工具类 ,通常都是通过import的形式引入的
这样写,存在一致性,必须调用方法名,而且必须传入当前组件实例等问题,会显得比较繁琐,尤其传值,很多人可能头疼,起名字应该还好
- 混入就解决了这个问题
3. 混入实例
在之前文章代码基础上修改的标题组件
混入钩子 this就代表组件实例
混入值必须是对象类型
const testMixin = {
created() {
this.sayEat()
},
methods: {
sayEat() {
console.log("吃了吗?");
}
}
}
组件混入
通过组件
mixins属性混入
值是个数组 当然也就表示可以有多个混入,方便逻辑复用
Vue.component("heading", {
mixins: [testMixin],
})
4.界面用到这个组件的地方 混入代码都会执行
5. 疑问解答
- 当组件和混入对象含有同名选项时，咋办??
这些选项将以恰当的方式进行“合并”
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先,
简单说就是 如果混入data,有同名的属性就以组件自己的为准
2.同名钩子函数将合并为一个
数组，因此都将被调用。
另外，混入对象的钩子将在组件自身钩子之前调用。
3.值为对象的选项，例如 methods、components 和 directives，将被合并为
同一个对象。两个对象键名冲突时，取组件对象的键值对。
5. 当然也可以全局混了
使用全局混入,将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
注意
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
6. 更多详细的内容建议看官网哦,文末有mixin传送门
这里其实也可以自己新建个
mixin目录,专门存放混入的js代码,export导出,需要的地方import,遵循这种模块化,这里就不在展开了
