zoukankan      html  css  js  c++  java
  • Vue中插槽的使用。

    写在前面:

      vue中插槽的使用让组件变得更加灵活。使得封装一个组件的复用性和API的暴露更加灵活多变。

    当组件当做标签使用的时候,在标签里面的元素不会显示,这个时候就需要用到插槽。

    一、最基本的使用

      当组件当做标签使用的时候,在组件标签内部的标签往往不显示,这个时候就需要用到插槽。写在组件标签内部的标签需要在该组件标签内部使用solt接收,solt标签会将所有标签在同一位置接收显示。但是灵活的不高。

    二、命名插槽的使用

      给组件标签内部标签添加一个solt的属性,属性值为插槽的名字。在组件内部使用solt标签进行接收,solt标签添加一个name属性,name的属性值为solt的属性值,这样可以在不同位置进行显示,加大了插槽的灵活度。

    三、作用域插槽

      当组件当做标签使用的时候,如果需要将插槽中的数据需要使用组件内部数据的时候,需要在组件内部的标签外部添加一个template的标签,添加一个scoped的属性,值为任意值(porps),用来接收组件内部传递过来的值。通过属性值(props).属性(组件内部定义属性)接收。

    在这里说一下封装一个组件需要注意的问题:

      1,组件的复用性。

      2,需要暴露的API。

    在这里举一个例子,如何封装一个轮播图,在这里先考虑的是轮播图的结构是否一样,如果结构是定死的,我们就不必使用插槽,直接将轮播图组件写死,把轮播图使用的数据暴露出去,这样便于数据的更新。如果轮播图的样式不一,可以使用插槽来增强轮播图的灵活度,把样式暴露出去,数据写在轮播图组件里。

      

  • 相关阅读:
    URAL——DFS找规律——Nudnik Photographer
    URAL1353——DP——Milliard Vasya's Function
    URAL1203——DPor贪心——Scientific Conference
    递推DP HDOJ 5389 Zero Escape
    区间DP UVA 1351 String Compression
    树形DP UVA 1292 Strategic game
    Manacher HDOJ 5371 Hotaru's problem
    同余模定理 HDOJ 5373 The shortest problem
    递推DP HDOJ 5375 Gray code
    最大子序列和 HDOJ 1003 Max Sum
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10428017.html
Copyright © 2011-2022 走看看