高级 Vue 组件模式 (4)

LancerComet 发布于2019-08-23 12:27 / 859人阅读

摘要：使用替换目标在第三篇文章中，我们使用来抽离了注入依赖项的公共逻辑。成果通过作用域插槽，我们有效地避免了第三方组件由于混入而可能造成的命名冲突以及隐式依赖等问题。

04 使用 slot 替换 mixin 目标

在第三篇文章中，我们使用 mixin 来抽离了注入 toggle 依赖项的公共逻辑。在 react 中，类似的需求是通过 HOC 的方式来解决的，但是仔细想想的话，react 在早些的版本也是支持 mixin 特性的，只不过后来将它标注为了 deprecated。

mixin 虽然作为分发可复用功能的常用手段，但是它是一把双刃剑，除了它所带来的便利性之外，它还有以下缺点：

混入的 mixin 可能包含隐式的依赖项，这在某些情况下可能不是调用者所期望的

多个 mixin 可能会造成命名冲突问题，且混入结果取决于混入顺序

使用不当容易使项目的复杂度呈现滚雪球式的增长

所以是否有除了 mixin 以外的替代方案呢？答案当时也是有的，那就是使用 vue 中提供的作用域插槽特性。

实现

这里关于作用域插槽的知识同样不赘述了，不熟悉的读者可以去官方文档了解。我们可以在 toggle 组件模板中的 slot 标签上将所有与其上下文相关的方法及属性传递给它，如下：

这样，我们可以通过 slot-scope 特性将这些方法和属性取出来，如下：

当然，相比上一篇文章，我们需要对 custom-button 和 custom-status-indicator 组件做一些简单的更改，只需要将混入 mixin 的逻辑去掉，并分别声明相应的 props 属性即可。

成果

通过作用域插槽，我们有效地避免了第三方组件由于混入 toggleMixin 而可能造成的命名冲突以及隐式依赖等问题。

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

sandbox: 在线演示

github: part-4

总结

mixin 虽好，但是一定不要滥用，作为组件开发者，可以享受它带来的便利性，但是它对于组件调用者来说，可能会造成一些不可预料的问题，通过作用域插槽，我们可以将这种问题发生的程度降到最小，同时解决 mixin 需要解决的问题。

github gist

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

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/98537.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 组件模式 (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 组件模式 (9)

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

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