Mixin 组件在项目中经常被用来重用一些业务逻辑,但它们有一些不确定的细微差别,这在项目开发中越来越明显。我偶尔也会遇到这种情况,它们会给代码库的重构或新功能的开发带来困难。
在介绍我的方法之前,我想先介绍一下使用mixins的优点和缺点。
缺点并不是避免使用 mixins 的一个关键原因,但我们应该了解它们。建议使用基于这些技巧的方式来减少缺点所带来的影响。
在 method、getter、value和 props 名字开头使用前缀。它展示了 mixin 相关的功能。使用这个技巧可以让我们轻松地分离组件 props 和 mixin props。例如:$<mixinName>_<(prop|method|value)>
export default {
props: {
$impressionsMixin_page: {
type: Number,
required: true
},
$impressionsMixin_listingId: {
type: Number,
required: true
},
$impressionsMixin_itemId: {
type: Number,
required: true
}
},
data() {
return {
$impressionsMixin_observer: null,
$impressionsMixin_timeout: null,
$impressionsMixin_eventObject: null
};
},
methods: {
$impressionsMixin_getObserverOptions() {
// ...
},
$impressionsMixin_setImpressionObserver() {
// ...
},
$impressionsMixin_resetImpressionObserver() {
// ...
},
$impressionsMixin_logImpression() {
// ...
}
}
};
在父组件中这样使用:
<template>
<div id="app">
<ListingItem
v-for="item in items"
:key="item.id"
:item="item"
textAlign="left"
:$impressionsMixin_page="page"
:$impressionsMixin_itemId="item.id"
:$impressionsMixin_listingId="listingId"
/>
</div>
</template>
我不喜欢在全局mixin中使用前缀。通常,这些方法和值的名称是明确的,并且它们的功能不会在项目的其他部分重复,所以不需要为它们添加前缀。
export default {
config() {
// ...
},
user() {
// ...
},
isMobile() {
// ...
},
isTablet() {
// ...
},
isDesktop() {
// ...
}
};
该方式的优点:
Mixin是一个有用的工具,但它会使我们的项目特别是在大项目中变得更加复杂、不灵活和不透明。使用这种方法是一种很好的实践,可以更加明确mixin含义并避免一些由于不明确导致的bug。
作者:knaagar, 译者:前端小智
原文:https://medium.com/@artem.holinka/use-vue-js-mixins-in-a-better-way-11e4ff774763
在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
主要抽离组件共用的代码,如各个页面中分页组件的data、methods,和ui原型中统一的confirm和alert弹窗以及加载的进度条等
想在你的Vue组件之间共享代码?如果你熟悉 Vue 2 则可能知道使用 mixin ,但是新的 Composition API 提供了更好的解决方案。在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们
当我们的Vue项目功能越来越多时,如果有类似的组件,可能会发现自己一次又一次地复制和粘贴相同的数据、方法和 watch。当然,我们可以将所有这些单独的文件编写为一个单独的组件
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!