vue slot内容分发

时间:2019-09-17
本文章向大家介绍vue slot内容分发,主要包括vue slot内容分发使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot。这个过程就叫内容分发。

最为常用的是两种slot:一种是匿名slot, 一种是具名slot。

匿名 很好理解: 就是默认,没有名字。 具名: 就是slot 有了name属性,有了名字。

下面来个综合的小demo:

父组件:

<div class="testslot">
      我是TestSlot:父组件
      <slot1>
          <p style="color:red">balabala</p>
      </slot1>
      <br>
      <br>

      <h2>下面是一个具名插槽的test</h2>

      <slot2>
        <h3 slot="fr">frr</h3>
        645112728@ahwdkhasdn.coaksdb
        <p slot="br">ppppppppppppppp</p>
        ????
      </slot2>

</div>

然后再slot1这个子组件中:(这个测试的是匿名slot)

<div class="slot1">
      <div>我是slot1组件</div>
      <slot></slot>
  </div>

在slot2这个组件当中:

<div class="slot2">
     <slot name="fr"></slot>
     index  <slot></slot>
     <slot name="br"></slot>
  </div>

可以看到效果如下:

理解: 在父组件当中,遇到子组件中 如果还有元素,基本就是开始slot了,然后就可以看那个子组件中对这个slot的调用了。

$flag 上一页 下一页