vue slot插槽

2018-12-14 本文已影响0人小碎步快跑

<slot> 元素作为承载分发内容的出口 --官方文档的定义

slot 实现的就是内容分发，实际上就是为了让组件可以组合，用一种方式来混合父组件的内容和子组件自有的模板.

实际在项目中应用是：例如有一个弹框是固定的模板，但是这个提示框要根据放到不同的产品页面显示不同产品信息。
slot 到底是什么意思--看图

根据是否设置name这个属性，分为匿名插槽、具名插槽

匿名插槽：

1 <navigation-link> 子组件定义为

<a
  v-bind:href="url"  class="nav-link">
  <slot></slot>
</a>

2 父组件这样去使用<navigation-link>子组件

<navigation-link url="/profile">
Your Profile
</navigation-link>

3 渲染出来的 HTML

<a v-bind:href="url" class="nav-link">
  Your Profile
</a>

具名插槽：

1 <alert> 组件定义为

 <div class="alertBox">
    <p>
      我是标题，你也可以动态传入
    </p>
    <div class="contenSlot">
      <slot name="content">
        <div class="alertContent">
          <p>想要展示的内容 你不写就展示我现在的内容</p>
        </div>
      </slot>
    </div>
    <div class="footerOption">
      <slot name="footerOption">
        <div class="flw">
          <button>取消</button>
        </div>
        <div class="flw">
          <button>确定</button>
        </div>
      </slot>
    </div>
  </div>

2 父组件这样使用alert组件

<div class="fatherBox">
  //组件的其他部分
  <div class="otherWrap">
    <span class="textLabel">其他部分</span>
  </div>
  <p @click="check">
    确 定
  </p>
  //插槽
  <alert>
    <div slot="content">
      <p class="listItem">
        <span class="item">你想在你的页面显示啥就写啥呗</span>
      </p>
      <p class="listItem">
        <span class="item">我就是不想和你原来的一样</span>
      </p>
    </div>
    <div slot="footerOption">
      <button>我知道了</button>
    </div>
  </alert>
</div>