vue中mixins和组件的区别和用法

灰太狼 2022-09-04 11:41 229阅读 0赞

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

mixins理解  
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：  
父组件 + 子组件 >>> 父组件 + 子组件  
mixins：  
父组件 + 子组件 >>> new父组件  
有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]

资料：  
[vue中mixins的理解及应用][vue_mixins]

[vue中mixins的使用方法和注意点（详）][vue_mixins 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20220829/2ff109f272694113a5cbb58a450d6ffa.png
[vue_mixins]: https://www.jianshu.com/p/a72bf060eeaa
[vue_mixins 1]: https://blog.csdn.net/a378113472/article/details/105783793?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242