高级 vue 组件模式 2

栏目: JavaScript · 发布时间: 6年前

内容简介:我们需要实现的需求是能够使使用者通过熟悉 vue 的童鞋可能马上会想到不同的解决方案,比如使用这里简单介绍下

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

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

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

require

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

实现

在 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 属性来代表开关状态,而使用一个可监听对象,是因为 provideinject 绑定并不是可响应的,同时官方文档也指出,这是刻意而为,所以为了享受到 vue 响应性带来的便利性,我们这里传入 status 这个可监听对象。

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

inject: { toggleComp: "toggleComp" }
复制代码

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

成果

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

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

  • sandbox:在线演示
  • github: part-2

总结

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


以上所述就是小编给大家介绍的《高级 vue 组件模式 2》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

疯狂科学家大本营

疯狂科学家大本营

Bei Er Fei Ao Er / 本书翻译组 译、黄晓庆 周宇煜 张为民 审译 / Science Press / 2012-1-5 / 48.00元

美国最棒的创意工场不是贝尔实验室,不是硅谷,也不是麻省理工学院的媒体实验室,而是由五角大楼领导的绝密军事机构DARPA——国防高级研究计划局。DARPA是由美国前总统艾森豪威尔建立的军事部门,创建的目的是为了回应苏联的太空计划。 虽然DARPA属于政府机构,但是没有冷冰 冰的氛围和官僚做派,那里的科学家偏爱牛仔裤和运动鞋。不过他们最爱的还是在各个领域寻找颠覆性创意。从航空航天、IT,到能源领......一起来看看 《疯狂科学家大本营》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具