如何在Vue 中管理 Mixins（搞懂这两点就足够了）

转载地址：https://segmentfault.com/a/1190000021772893

当我们的Vue项目功能越来越多时，如果有类似的组件，可能会发现自己一次又一次地复制和粘贴相同的数据、方法和 watch。当然，我们可以将所有这些单独的文件编写为一个单独的组件，并使用 prop 来尝试自定义它们，但是使用这么多 props 很容易造成混乱且难懂。为了避免这个问题，大多数人只是继续添加重复的代码，尽管自己感觉应该有更好的解决方案。

值得庆幸的是，Vue 引入mixin来解决这类的总是，mixin是在不同组件之间共享可重用代码的最简单方法之一。Mixin 对象可以使用任何组件选项如 data、mounted、created、update等，当组件使用 Mixin 时，Mixin 对象中的所有信息都将混合到组件中。然后，组件将有权访问mixin中的所有选项，就像在组件本身中声明的那样。接着，我们通过示例来帮助加深一下映像：

// mixin.js file
export default {data () {msg: ‘Hello World’},created: function () {console.log('这里由 mixin 中 create 方法打印！')},methods: {displayMessage: function () {console.log(‘这里由 mixin 方法里打印！’)}}
}// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({mixins: [mixin],created: function () {console.log(this.$data)this.displayMessage()}
})
// => "这里由 mixin 中 create 方法打印！"
// => {msg: ‘Hello World’}
// => "这里由 mixin 方法里打印！"

正如我们所看到的，在使用mixin之后，该组件包含mixin中的所有数据，并且可以通过使用this来访问mxin中的数据和方法。我们还可以使用变量而不是单独的文件来定义mixin。坦白地说，这是我们需要了解的大多数关于mixin的知识，但是我认为了解某些用例和特殊情况很有用。

如果发生命名冲突该怎么办？

当mixin中的数据、方法或任何组件选项与组件中的选项具有相同的名称时，可能会发生组件与其mixin之间的命名冲突。如果发生这种情况，则组件本身的属性将优先。例如，如果在组件和mixin中都有一个title数据变量。title将返回组件中定义的值，如下所示：

// mixin.js file
export default {data () {title: ‘Mixin’}
}
// -----------------------------------------------------------// main.js file
import mixin from ‘./mixin.js’
export default {mixins: [mixin],data () {title: ‘Component’},created: function () {console.log(this.title)}
}
// => "Component"

总结

一般来说，对于Vue 的 mixin，我们还有很多要了解，，但是上面这些知识在开发中一般足够用了。如果你想了解更高级的主题，比如Vue中的全局mixin和自定义合并设置，可以在 Vue文档中找到这些信息。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

如何在Vue 中管理 Mixins（搞懂这两点就足够了）相关推荐

如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
没有为此文件配置应用程序上下文_如何在macOS中管理文件关联？
在macOS中,右键单击(或按住Ctrl键单击)文件时出现的"打开方式"上下文菜单提供了指向与该文件类型关联的Mac上安装的所有应用程序的链接. 列表的顶部是macOS的默认应用程 ...
(Redis基础教程之八) 如何在Redis中管理Sets
如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端如何在Redis中管理字符串如何在Redis中 ...
npm中node更新_如何在Node中管理NPM和功能时保持理智
npm中node更新 by Ted Gross 泰德·格罗斯(Ted Gross) 如何在Node中管理NPM和功能时保持理智 (How to keep your sanity while manag ...
Word控件Spire.Doc 【段落处理】教程(十二)：如何在 C# 中管理 word 文档的分页
当我们要管理段落的分页时,我们可以直接插入分页符.但是后来我们可能会发现很难在分页符上方添加或删除文本,然后我们必须删除整个分页符.使用 Microsoft word,我们还可以使用段落对话框来管理 ...
如何在macOS中管理家长控制
如果您想让孩子或其他人访问Mac,那么有必要熟悉一下启用家长控制时作为管理员可以使用的用户帐户限制. 在macOS中,Apple可以管理单个用户帐户的各种级别的限制.因此,例如,如果您的孩子使用Mac ...
骨架屏技术讲解以及如何在Vue中实现骨架屏
骨架屏技术讲解以及如何在Vue中实现骨架屏写在前面骨架屏是什么如何实现(原理分析) 一个生动的例子实现方式(具体实现) 方案一.在模版中来实现骨架屏方案二.使用一个Base64的图片来作为骨 ...

如何在Vue 中管理 Mixins（搞懂这两点就足够了）

如果发生命名冲突该怎么办？

总结

如何在Vue 中管理 Mixins（搞懂这两点就足够了）相关推荐

最新文章

热门文章