内容简介:作者:Matt译者:前端小智来源:medium
作者:Matt
译者:前端小智
来源:medium
本文 GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
当我们的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 。
原文: https://levelup.gitconnected....
交流
文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复 福利 ,即可看到福利,你懂的。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 更好就足够了吗?| 驱动变革
- Python文件操作,看这篇就足够
- 入门GitHub,这一个开源项目足够了!
- 想读懂Linux内核,这一篇就足够!
- 强大美观的通用弹窗XPopup,一个就足够!
- 谷歌大脑:只要网络足够宽,激活函数皆可抛
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。