vue-mixin-混入

1.前言

1.一切反动派都是纸老虎
2.之前没怎么用这个混入 心理上就觉得挺难,其实看看也就不过如此
3.这也是初心,帮助自己克服这种纸老虎的心理,也顺便记录下自己突破的过程,N年后来看,当时写的真球搓,也希望大家都觉得这写的是啥呀,还不如我

4. 万事开头难,但是最好的开始永远是现在,共勉

---

2.混入-mixin

2.1官方概念

混入 (mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项

---

2.2 理解

1. 首先其实这个混入也属于一种设计模式
2. 场景
   我们平常写的很多工具类 ,通常都是通过import的形式引入的
   这样写,存在一致性,必须调用方法名,而且必须传入当前组件实例等问题,会显得比较繁琐,尤其传值,很多人可能头疼,起名字应该还好

---

3. 混入就解决了这个问题

---

3. 混入实例

在之前文章代码基础上修改的标题组件
混入钩子 this就代表组件实例
混入值必须是对象类型

        const testMixin = {
            created() {
                this.sayEat()
            },
            methods: {
                sayEat() {
                    console.log("吃了吗?");
                }
            }
        }

---

组件混入

通过组件 mixins属性混入
值是个数组 当然也就表示可以有多个混入,方便逻辑复用

        Vue.component("heading", {
            mixins: [testMixin],
})

---

4.界面用到这个组件的地方 混入代码都会执行

5. 疑问解答

1. 当组件和混入对象含有同名选项时，咋办??
   这些选项将以恰当的方式进行“合并”
   比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先,
   简单说就是 如果混入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,遵循这种模块化,这里就不在展开了

---

参考资料

mixin
标题组件

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉