华人澳洲中文论坛

热图推荐

    我用这9个小技能封装Vue组件,老大得夸我’封得好‘

    [复制链接]

    2022-10-28 18:43:15 21 0

    组件是前端框架的根本构建块。把它们设计得更好会使咱们的运用顺序更易改动和了解。在这节课中,分享一下在过来几年中任务中学到的 9 个技能。
    1. 你可能不需求创立一个组件
    在创立一个组件以前,看看它是为了可重用性和为某些UI添加一个形态,仍是仅仅为了组织和划分代码。
    假如是后者,那末你就不需求创立它,由于它只会减少更多不用要的任务,好比传递props和发射事情。
    不只如斯,它还要求咱们跳转到该文件以查看它所包孕的内容,而不是间接在父组件中看到它,这就洁净多了。
    2. 使用插槽而不是 prop 来显示内容
    假定有一个可反复使用的按钮组件,它经过props获得文本。
    假如想在其中显示一个图标,必需添加更多的道具,如并更新组件以显示该图标。
    但有了插槽,咱们就能在每次使用该组件时,以想要的形式显示标签:
    Delete Item
    或者你只需求把某个单词加粗。关于插槽,能够间接在文本中使用标志,而不是在组件中解析它。
    3. 将该组件与触发它的要素分组
    有时有两个独立的组件在某种状况下一同使用。最佳把它们放在一个新的组件中,这样反复使用和挪动它们更易。
    一个常见的例子是 Modal 组件。咱们通常在点击一个特定的按钮时显示Modal。与其在每次咱们想重用它(或把它移到其余中央)时添加showModal形态和导入modal与它的按钮,不如有一个繁多的组件来显示按钮,当用户点击时,它显示相干的modal。
    Create Item

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    返回列表 本版积分规则

    :
    注册会员
    :
    论坛短信
    :
    未填写
    :
    未填写
    :
    未填写

    主题32

    帖子39

    积分173

    图文推荐