Vue2 中三种逻辑复用方法

时间: 2020-09-17阅读: 130标签: vue

Mixins

Mixin对象能够使用组件的任何属性(data,mounted,created,update等),而且当组件使用mixin时,这个mixin的所有信息也会混合到这个组件里,这个组件就能够访问到所有mixin的属性就像申明在自己对象中一样。

沿用 《Vue 3.0 特性指南(一) - 为什么要引入组合式 API?》 中的搜索和排序的例子,想使用 Mixins ,需要先创捷它们各自的 Mixin 对象,然后在组件中引入 :

const productSearchMixin = {
    data() {
        return {
            // 搜索变量
        };
    },
    methods: {
        // 搜索方法
    },
};
const resultSortMixin = {
    data() {
        return {
            // 排序变量
        };
    },
    methods: {
        // 排序方法
    },
};
export default {
    mixins: [productSearchMixin, resultSortMixin],
};

这样代码就是按照功能来组织的,但是 Mixins 也有缺点:

需要注意命名冲突,具体可以看 vue 官网选项合并这部分:混入 - Vue.js

不清楚这些 mixins 如何互相作用的,如果 mixins 嵌套,会很难理解

不可定制,并没有那么容易进行复用,按上面的例子,项目中如果需要筛选产品、用户以及评论之类的场景,就要编写不一样的 mixin 对象


Mixin Factories

Mixin 工厂函数可以根据传入的配置返回定制的 mixin 对象,举个栗子:

// mixins/factories/search.js
export default function searchMixinFactory({ ... }) {
    // 搜索功能
}

// mixins/factories/sorting.js
export default function sortingMixinFactory({ ... }) {
    // 整理功能
}

// search.vue
import searchMixinFactory from '@mixins/factories/search';
import sortingMixinFactory from '@mixins/factories/sorting';

export default {
    mixins: [
        productSearchMixin({
            namespace: 'productSeatch',
            // ...搜索配置参数
        }),
        resultSortMixin({
            namespace: 'resultSorting',
            // ...排序配置参数
        })
    ],
};

这样一来,我们可以通过传递不同配置来获得我们需要特定场景下的 mixin 对象,而搜索和排序中通用的逻辑得以复用;功能互相作用也有了更清晰的关系。但是使用这种方法需要注意的:

严格的命名空间限制

还是需要看看 mixins 的内部逻辑,以求知道它们具体做了什么事

mixin 工厂函数 不能动态生成


Scoped Slots

Vue2 中第三种逻辑复用的方法是使用作用域插槽,即 Scoped Slots,首先创建三个文件:

// components/generic-search.vue
<script>
export default {
    props: ['getResults'],
    // 搜索功能
}
</script>

<template>
    <div>
        <slot v-bind="{ query, results, run }" />
    </div>
</template>
// components/generic-sorting.vue
<script>
export default {
    props: ['input', 'options'],
    // 
}
</script>

<template>
    <div>
        <slot v-bind="{ options, input, output }" />
    </div>
</template>
// search.vue
...
<template>
    <GenericSearch :get-results="getProducts" v-slot="productSearch">
        <GenericSorting
            :input="productSearch.results"
            :options="resultSortingOptions"
            v-slot="resultSorting"
        >
        ...
</template>

我们在 search.vue 中使用这些组件发送特定产品搜索的配置,这几乎解决了所有 mixins 的缺点,但是也有其特有的缺陷:

增加了缩进,降低代码可读性

需要更多的配置

暴露的属性只在模板中可用,降低灵活性

需要存在多个组件实例,性能更低

来自:https://www.cnblogs.com/jsmax/p/13721063.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9682

关闭

vue之nextTick全面解析

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

vue项目中vux的使用

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。在vue-cli中使用步骤如下:vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js

详细分析Vue.nextTick()实现

刚开始接触Vue的时候,哇nextTick好强,咋就在这里面写就是dom更新之后,当时连什么macrotask、microtask都不知道(如果你也不是很清楚,推荐点这里去看一下,也有助于你更好地理解本文),再后来,写的多了看得多了愈发膨胀了,就想看看这个nextTick到底是咋实现的

vue2.0/3.0在main.js引入scss文件报错

在vue2.0的main.js中引入scss文件报错原因是:在build文件夹下的webpack.base.conf.js的rules里面添加配置,vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法:在vue.config.js文件中添加以下代码

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

Vue组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

对Vue.js的认知

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

如何理解Vue.js中的ref及$ref,$

首先我们来看一下vue官方是怎么解释的m好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

尤雨溪:Vue Function-based API RFC【转】

将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!