Vue插槽（slot）详解与使用方法这是我参与更文挑战的第 5 天，活动详情查看：更文挑战插槽：简单理解就是组件内部

这是我参与更文挑战的第 5 天，活动详情查看：更文挑战

插槽：简单理解就是组件内部留一个或多个的插槽位置，可供组件传对应的模板代码进去。插槽的出现，让组件变的更加灵活。

1. 匿名插槽

父组件

// home.vue

<template>
  <div class="home">
    <footerComponent>
    	<p>我是匿名插槽</p>
    </footerComponent>
  </div>
</template>

<script>
import footerComponent from '@/components/footerComponent.vue'
export default {
  components: {
    footerComponent,
  }
}
</script>

子组件

// footerComponent.vue
<template>
  <div>
  	<h1>子组件</h1>
    <slot></slot>	//  替换为 <p>我是匿名插槽</p>
  </div>
</template>

在这里插入图片描述

1.2 后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

父组件

// home.vue

<template>
  <div class="home">
    <footerComponent></footerComponent>
  </div>
</template>

<script>
import footerComponent from '@/components/footerComponent.vue'
export default {
  components: {
    footerComponent,
  }
}
</script>

子组件

// footerComponent.vue
<template>
  <div>
  	<h1>子组件</h1>
    <slot>
      <p>我是后补内容</p>
    </slot>
  </div>
</template>

在这里插入图片描述

2. 具名插槽

顾名思义就是带名字的插槽，假如需要在组件内部预留多个插槽位置，就需要为插槽定义名字，指定插入的位置。 Vue 2.6.0+ 版本，使用v-slot替代slot 和 slot-scope。注意点: 1.具名插槽的内容必须使用模板包裹; 2.不指定名字的模板插入匿名插槽中，推荐使用具名插槽，方便代码追踪且直观清楚; 3.匿名插槽具有隐藏的名字"default;"

2.1 具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。 例如 v-slot:header 可以被重写为 #header; 然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

// 这样会触发一个警告 
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

2.2 动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

父组件

// 现在 <template>元素中的所有内容都将会被传入相应的插槽。
// 任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
<template>
  <div class="home">
    <footerComponent>
      <template v-slot:header>
        <h2>header</h2>
      </template>
      <template v-slot:[mybody]>
        <h3>动态插槽名</h3>
      </template>
      <p>内容</p>
      <template #footer>
        <h2>footer</h2>
      </template>
    </footerComponent>
  </div>
</template>

<script>
import footerComponent from '@/components/footerComponent.vue'
export default {
  data(){
    return{
      mybody:'body',
    }
  },
  components: {
    footerComponent,
  }
}
</script>

子组件

<template>
  <div class="footerComponent">
    <h1>子组件</h1>
    <slot name="header"></slot>
    <slot name="body"></slot>
    <slot><p>我是后补内容</p></slot>	 //  等价于 <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<style scoped lang="stylus">
.footerComponent
  width 100%
  height 200px
  background-color pink
</style>

在这里插入图片描述

3. 作用域插槽

3.1 父传子

父组件

<template>
  <div class="home">
    <headerComponent :title="myName">
      <template #header>
        <h2>父组件</h2>
      </template>
    </headerComponent>
  </div>
</template>

<script>
import headerComponent from '@/components/headerComponent.vue'
export default {
  data(){
    return{
      myName:'我是',
    }
  },
  components: {
  	headerComponent,
  }
}
</script>

子组件

<template>
  <div class="headerComponent">
    <slot name="header"></slot>
	<div class="childName">{{title}}子组件</div>
  </div>
</template>

<script>
export default {
  props: {
    title:String
  }
}
</script>

<style scoped lang="stylus">
.childName
  color red
  font-size 20px
</style>

在这里插入图片描述 父组件传递的插槽内容是由子组件编译的，插槽作用域由子组件决定。所以如果需要动态修改插槽的内容，就需要子组件传参给父组件。

3.2 子传父

父组件

<template>
  <div class="home">
    <footerComponent :myLayout="layout">
      <template v-slot:header="headerSlotProps">
        <h2>{{headerSlotProps.header}}</h2>
      </template>
      <template v-slot="slotProps">
        <p>{{slotProps.content}}</p>
      </template> 
      <template #footer="slotProps">
        <h2>{{slotProps.footer}}</h2>
      </template>
    </footerComponent>
  </div>
</template>

<script>
import footerComponent from '@/components/footerComponent.vue'
export default {
  data(){
    return{
      layout:{
        header:'头部',
        content:'内容',
        footer:'脚部'
      },
    }
  },
  components: {
  	footerComponent
  }
}
</script>

子组件

<template>
  <div class="footerComponent">
    <h1>子组件</h1>
    <slot name="header" :header="myLayout.header"></slot>
    <slot :content="myLayout.content"><p>我是后补内容</p></slot>
    <slot name="footer" :footer="myLayout.footer"></slot>
  </div>
</template>

<script>
export default {
  props: {
    myLayout:Object
  }
}
</script>

<style scoped lang="stylus">
.footerComponent
  width 100%
  height 250px
  background-color pink
</style>

在这里插入图片描述

父组件传参给子组件，props接收后，插槽slot再通过绑定属性传递参数返回给父组件，不管是模板代码还是数据，控制权完全掌握在父组件手里。