Vue高级特性「六」--slot 插槽

基本使用

父组件在引用的子组件中添加内容

<slotDemo :url="website.url">
  {{website.title}} //父组件添加的内容
</slotDemo>
data() {
  return {
    website:{
      url:'http://www.baidu.com',
      title:'百度',
    },
  };
},

子组件 slotDemo.vue

<template>
  <div>
    <a :href="url">
      <slot>
        默认内容，即父组没设置内容是，这是显示
      </slot>
    </a>
  </div>
</template>

作用域插槽

父组件可以拿到子组件的数据

• 1.把组件的的数据website 绑定到 slot 的一个自定义属性slotDate上
• 2.在父组件里定义 template 设置v-slot为任意命名参数slotProps，
• 3.数据取值为：slotProps.子组件命名数据.具体数据字段

子组件 ScopedSlotDemo.vue

<template>
  <div>
    <a :href="url">
    //把组件的的数据website 绑定到 slot 的一个自定义属性slotDate上
      <slot :slotDate="website"> 
        {{website.title}} 
      </slot>
    </a>
  </div>
</template>

<script>
export default {
  props: ['url'],
  data() {
    return {
      website:{
        url:'http://www.baidu.com',
        title:'百度1',
        subTitle:'百度一下，你就知道1'
      }
    };
  },
};
</script>

父组件 调用数据

<ScopedSlotDemo :url="website.url">
  //在 template 设置v-slot为任意命名参数slotProps，
  // 取值 slotProps.子组件slot上自定义属性slotDate.子组件数据
  <template v-slot="slotProps">
    {{slotProps.slotDate.title}}
  </template>
</ScopedSlotDemo>

具名插槽

子组件 NameSlot 定义多个solt添加 name属性来标识

<div>
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <solt></solt>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：通过v-slot:name 来匹配到相同name的子组件

<NameSlot>
  <template v-slot:header>
    <h1>将插入 header slot中</h1>
  </template>
  <p>将插入 main slot中,及未命名的slot</p>
  <template v-slot:footer>
    <h1>将插入 footer slot中</h1>
  </template>
</NameSlot>