高级 Vue 组件模式 (1)

lanffy 发布于2019-08-23 12:26 / 3529人阅读

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

写在前头

去年，曾经阅读过一系列关于高级 react 组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章，碰巧最近接手了一个公司项目，前端这块的技术栈是 vue。我对于 vue 本身还是比较熟悉的，不过大多都是一些很简单的个人项目，在构建相对比较复杂的应用中缺乏实践经验，就想着也搜搜类似题材的文章，涨涨知识。结果似乎没有找到（其实也是有一些的，只不过不是和 react 和 angular 对比来写的），不如就按照 react 和 angular 这两个系列文章的思路，使用 vue 来亲自实现一次吧。

由于三个框架的设计思想、语法都有比较大的区别，所以在实现过程中，均使用更符合 vue 风格的方式去解决问题，同时也提供一些对比，供读者参考，如果观点有误，还望指正。

01 实现一个 toggle 组件

这个系列的文章的第一篇，都会从实现一个最简单的 toggle 组件开始。

在 Vue 中，我们通过 data 来声明一个 checked 属性，这个属性所控制的状态代表组件本身的开关状态，这个状态会传递给负责渲染开关变换逻辑的 switch 组件中，关于 switch 组件，这里不做过多介绍，你把它当作一个私有组件即可，其内部实现与该篇文章没有太大的关联。同时这个组件还拥有一个 on 属性，用来初始化 checked 的状态值。

通过在 switch 组件注册原生 click 事件，toggle 组件还会触发一个 toggled 事件，在 App 组件中，我们会监听这个事件，并将其回传的值打印到控制台中。你可以下面的链接来看看这个组件的实现代码以及演示：

sandbox: 在线演示

github: part-1

总结

toggle组件的实现是一个很典型的利用单向数据流作为数据源的简单组件：

on 是单向数据源，checked 代表组件内部的开关状态

通过触发 toggle 事件，将 checked 状态的变化传递给父组件

github gist

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

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

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

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

高级 Vue 组件模式 (3)

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

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

摘要：编写复合组件目标我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。成果通过复合组件的方式，我们将组件划分为了三个更小的职责更加单一的子组件。 02 编写复合组件目标我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。熟悉 vue 的童鞋可能马上会想到不同的解决方案，比如使用 slot 并配合 v-if，我们这里采用另外一种方法，利用 vu...

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

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

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

摘要：使用目标到目前为止，仅从组件自身的角度来看，它已经可以满足大多数的业务场景了。但我们会发现一个问题，就是当前组件的状态对于调用者来说，完全是黑盒状态，即调用者无法初始化，也无法更改组件的开关状态，这在一些场景无法满足需求。 07 使用 State Initializers 目标到目前为止，仅从 toggle 组件自身的角度来看，它已经可以满足大多数的业务场景了。但我们会发现一个问题，...

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

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

李义 2019-08-23 12:36 评论0 收藏0