高级 Vue 组件模式 (2)

Galence 发布于2019-08-23 12:26 / 1346人阅读

摘要：编写复合组件目标我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。成果通过复合组件的方式，我们将组件划分为了三个更小的职责更加单一的子组件。

02 编写复合组件 目标

我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。

熟悉 vue 的童鞋可能马上会想到不同的解决方案，比如使用 slot 并配合 v-if，我们这里采用另外一种方法，利用 vue 提供的 provide/inject 属性按照复合组件的思想来实现。

这里简单介绍下 provide/inject 的功能，它允许某个父组件向子组件注入一个依赖项（这里的父子关系可以跨域多个层级，也就是祖先与后代），如果我们在其他 mvvm 框架对比来看的话，你可以发现其他框架也具有相同的特性，比如：

angularjs: directive 中的 require 属性来声明注入逻辑

Angular: 依赖注入中组件级别的注入器

React: context 上下文对象

想进一步了解的话，可以参考官方文档

实现

在 vue 中，这里我们会分别实现三个组件，依次为：

toggle-button: 代表开关，用来渲染父组件的开关状态

toggle-on: 根据父组件 toggle 的开关状态，渲染当状态为开时的内容

toggle-off: 根据父组件 toggle 的开关状态，渲染当状态为关时的内容

在上一篇文章中，我们已经实现了 toggle 组件，这里我们要做一些更改。首先，需要使用 provide 属性增加一个提供依赖的逻辑，如下：

provide() {
    return {
      toggleComp: {
        status: this.status,
        toggle: this.toggle
      }
    }
}

这里的 status 是该组件 data 中的声明的一个可监听对象，这个对象包含一个 on 属性来代表组件的开关状态，而 toggle 则是 methods 中的一个组件方法。

关于为什么这里不直接使用 on 属性来代表开关状态，而使用一个可监听对象，是因为 provide 和 inject 绑定并不是可响应的，同时官方文档也指出，这是刻意而为，所以为了享受到 vue 响应性带来的便利性，我们这里传入 status 这个可监听对象。

对于其他三个组件，其内部实现逻辑十分简单，相信读者通过参考在线代码实例马上就能看懂，这里只提一下关于 inject 声明注入依赖的逻辑，如下：

inject: { toggleComp: "toggleComp" }

这里的 "toggleComp" 与之前的 provide 对象中声明的 key 值所对应，而 inject 对象的 key 值当前组件注入依赖项的变量名称，之后，子组件即可以通过 this.toggleComp 来访问父组件的属性与方法。

成果

通过复合组件的方式，我们将 toggle 组件划分为了三个更小的、职责更加单一的子组件。同时由于 toggle-on 和 toggle-off 都使用 slot 来动态地注入组件调用者在其内部包含的自定义渲染逻辑，其灵活性得到了进一步的提升，只要这三个组件是作为 toggle 组件的子组件来调用，一切都将正常运行。

你可以下面的链接来看看这个组件的实现代码以及演示：

sandbox: 在线演示

github: part-2

总结

通常情况下，在设计和实现职能分明的组件时，可以使用这种模式，比如 tabs 与 tab 组件，tabs 只负责 tab 的滚动、导航等逻辑，而 tab 本身仅负责内容的渲染，就如同这里的 toggle 和 toggle-button、`toggle-on、toggle-off 一样。

github gist

欢迎关注公众号 全栈101，只谈技术，不谈人生

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98526.html

高级 Vue 组件模式 (1)

摘要：写在前头去年，曾经阅读过一系列关于高级组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级组件模式的文章，碰巧最近接手了一个公司项目，前端这块的技术栈是。同时这个组件还拥有一个属性，用来初始化的状态值。写在前头去年，曾经阅读过一系列关于高级 react 组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章，碰巧最近接手了一个公...

lanffy 2019-08-23 12:26 评论0 收藏0
高级 Vue 组件模式 (3)

摘要：在中，我们是否也有一些手段或特性来提高组件的复用程度和灵活性呢答案当然是有的，那就是。成果通过实现，我们成功将注入的逻辑抽离了出来，这样每次需要共享组件的状态和方法时，混入该即可。 03 使用 mixin 来增强 Vue 组件目标之前一篇文章中，我们虽然将 toggle 组件划分为了 toggle-button、toggle-on 和 toggle-off 三个子组件，且一切运行良...

iKcamp 2019-08-23 12:26 评论0 收藏0
高级 Vue 组件模式 (5)

摘要：你可以下面的链接来看看这个组件的实现代码以及演示在线演示总结当期望获得子元素或者子组件的引用时，切记使用和来解决问题。 05 使用 $refs 访问子组件引用目标在之前的文章中，详细阐述了子组件获取父组件所提供属性及方法的一些解决方案，如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢？设想以下一个场景：当前的 custom-button 组件中，有一个 input 元素...

woshicixide 2019-08-23 12:27 评论0 收藏0
高级 Vue 组件模式 (9)

摘要：在中，这种类型的组件也可以叫做函数式组件。这种组件和普通组件相比的优势主要在于，它是无状态的，这意味着它的可测试性和可读性更好，同时一些情况下，渲染开销也更小。 09 使用 Functional 组件目标到此为止，我们的 toggle 组件已经足够强大以及好用了，因此这篇文章不会再为它增加新的特性。如果你是从第一篇文章一直读到这里的读者，你一定会发现，整篇文章中，我几乎没有对 to...

李义 2019-08-23 12:36 评论0 收藏0
高级 Vue 组件模式 (6)

摘要：之后再引入该指令，如下之后就可以在组件的模板中使用该指令了，比如一切都将按预期中运行，当组件的状态为开时，组件的根元素会增加一个的内容增强属性。到后来兴起了组件化开发的开发思想，指令似乎是随着的没落而消失了踪影。 06 通过 directive 增强组件内容目标之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外...

makeFoxPlay 2019-08-23 12:28 评论0 收藏0