Vue中的插槽(slot)

作者: 请叫我彭彭 | 来源:发表于2019-07-08 21:38 被阅读0次

Vue之深入理解插槽—slot, slot-scope, v-s
vue中的slot（插槽）
vue插槽
18、Vue3 作用域插槽
vue 插槽的使用
Vue中Slot的渲染过程
2020-07-23 一次性讲明白vue插槽slot
vue插槽slot
Vue3.0 组件的核心概念_插槽
slot是什么？有什么作用？原理是什么？

根据官方文档总结以下几点:

$\color{SkyBlue}{1.插槽内容}$

$\color{SkyBlue}{2.后备内容}$

$\color{SkyBlue}{3.具名插槽}$

$\color{SkyBlue}{4.作用域插槽}$

$\color{SkyBlue}{5.动态插槽名}$

1、插槽内容

组件<slot-content>，添加a标签、链接地址，然后在里面放置了标签<slot>。在父组件中引用<slot-content>组件。并在组件上设置url属性，在标签内添加了文字。

<template>
  <a :href="url">
    <slot></slot>
  </a>
</template>
<script>

<template>
  <div class="hello">
    <slot-content url="http://ww.baidu.com">跳转百度</slot-content>
  </div>
</template>
<script>
import slotContent from "./slotConent";
export default {
  name: "HelloWorld",
  components: {
    slotContent
  }
};
</script>

可以看到子组件里子组件中href变为了百度地址，并将文字也呈现了出来，,官方文档说明如果子组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。如果<slot>存在内容，则该组件其实标签和结束标签之间的内容会替换<slot>中内容

2、后备内容

该组件起始标签和结束标签之间有内容，那么就会替换原有组件中内容，如果没有内容则显示后备(默认)内容。添加了<slot-button>组件，添加了以下内容。

<template>
  <button>
    <slot>提交</slot>
  </button>
</template>

在这里我将两种情况都给写了

<template>
  <div class="hello">
    <slot-button></slot-button>
    <!-- 当在字组件闭合标签钱添加了内容，则会替换原有的内容 -->
    <slot-button>保存</slot-button>
  </div>
</template>
<script>
import slotButton from "./button";
export default {
  name: "HelloWorld",
  components: {
    slotButton
  }
};
</script>

来看看结果,可以看到第一个按钮我没有修改内容，他会显示默认内容，第二个我修改了则会替换原有内容，这就是后备内容。

3、具名插槽

有时我们需要多个插槽，例如对于一个网站包含了页头、内容、页尾。我们在开发每个页面的时候不可能每次都将页头页尾进行重写.

<template>
  <div>
    <header>
       <!-- 我希望把页头放这里 -->
      <slot name="header"></slot>
    </header>
    <main>
       <!-- 我希望把内容放这里 -->
      <slot></slot>
    </main>
    <footer>
        <!-- 我希望把页尾放这里 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

这种如何实现呢，具有多个插槽。如果你仔细看代码的话，你会发现<slot>有一个特殊的特性：name。未定义name属性，那么<slot>的name会默认为default。

<template>
  <div class="hello">
    <layout>
      <template v-slot:header>这是header</template>
      <div>这是内容1</div>
      <div>这是内容2</div>
      <div>这是内容3</div>
      <template #footer>这是footer</template>
    </layout>
  </div>
</template>
<script>
import layout from "./layout";
export default {
  name: "HelloWorld",
  components: {
    layout
  }
};
</script>

具有特殊的插槽可以用v-slot:标记的name名称来识别内容插入到指定的区域里。官方也提供了简写,例如#footer.来看看效果

4、作用域插槽

组件<slot-scope>,定义了对象data,将通过绑定值方式传递给父组件。而作用域插槽的关键作用就在来自子组件在<slot>标签绑定的值可以通过<v-slot>获取。

<template>
  <div class="slot-scope">
    <slot  :data="data"></slot>
  </div>
</template>

<script>
export default {
  name: "slotScope",
  data() {
    return {
      data: [
        {
          name: "测试1",
          id: 1
        },
        {
          name: "测试2",
          id: 2
        },
        {
          name: "测试3",
          id: 3
        }
      ]
    };
  }
};
</script>

<template>
  <div class="hello">
    <!-- 这里可以直接在组件上获取值 -->
    <slotScope v-slot:default="slotData">
      <div v-for="item in slotData.data" :key="item.id">
        <ul>
          <li>{{item.name}}</li>
        </ul>
      </div>
    </slotScope>
  </div>
</template>
<script>
import slotScope from "./slotScope";
export default {
  name: "HelloWorld",
  components: {
    slotScope
  },
  return() {}
};
</script>

5、动态插槽名

在vue6.2 新出了指令动态参数，我声明attributeName为"href",url为百度地址。那么在a标签里动态参数是以"[]"将参数名给包起来，这样在网页中就会被替换为"<a href="http://www.baidu.com">百度</a>"

<template>
  <div class="hello">
    <slotScope>
     
    </slotScope>
    <a :[attributeName]="url">百度</a>
  </div>
</template>
<script>
import slotScope from "./slotScope";
export default {
  name: "HelloWorld",
  components: {
    slotScope
  },
  data() {
    return {
      attributeName: "href",
      url: "http://www.baidu.com"
    };
  }
};
</script>