Vue2 中三种逻辑复用方法

时间: 2020-09-17阅读: 784标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

vue之nextTick全面解析

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

一点 Vue.observable 想法

Vue 2.6.0 新增了 Vue.observable api,但最近才去尝试使用它。这东西说新也不新,因为他就是 vue 本身的功能,只是暴露出来,成为新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一样。

对vue双向绑定的理解?

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,双向绑定就很容易联想到了,在单向绑定的基础,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

实战技巧,Vue原来还可以这样写

今天产品经理又给我甩过来一个需求,需要开发一个图表,拿到需求,瞄了一眼,然后我就去echarts官网复制示例代码了,复制完改了改差不多了,改完代码长这样

Vue组件中prop属性使用说明

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

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

vue多环境配置方案

一般服务器分为本地环境,测试环境,正式环境,如果每次都要修改配置就很麻烦,总结一下我使用的方法,修改package.json文件的scripts,在打包的时候执行不同的命令

Vue基于snabbdom做了哪些事

Snabbdom 核心代码大约只有 200 行。它提供了模块化架构,具有丰富的功能,可通过自定义模块进行扩展。在了解核心 patch 前,需要先了解 snabbdom 的模块化架构思想。

Vue中props知识点

如果你一直在阅读有关props内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

点击更多...

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