对于Vue Slot插槽的讲解

什么是Vue slot插槽？

----- 介绍内容摘抄自同站， 如有侵权，立即删除 -----
插槽，也就是slot，slot就是子组件里的一个占位符 一个slot的核心问题，就是显不显示，显示的话显示话，该如何去展示出来，这是由父组件所控制的 但是插槽显示的位置是由子组件自己所决定的，slot写在组件template的什么位置 父组件传过来的模板将会显示在什么位置。

---

1. 插槽基本使用(匿名插槽)

	众所周知, vue脚手架创建之后
	会生成一个App根组件以及一个HelloWorld组价
	如何利用插槽来完成显示内容与隐藏内容?

	这个时候我们就能用到匿名插槽来实现
	具体代码详看下方 ↓

<-- 这里是我们的App根组件 !-->

<template>
  <Card> 
    <div>我是slot插槽的内容div>  <-- 子组件内的元素都是插槽内容 !-->
  Card>
template>
<script>
import Card from '@/components/Card' <-- 引入子组件 !-->
export default {
  components: {
    Card
  }
}
script>
<style lang="scss" scoped>

style>

<-- 这里是我们的Crad子组件 !-->

<template>
  <div>
    <h2>我是Card页面h2>
    <div class="slot">
      <slot /> <-- slot插槽显示子组件插槽内容 !-->
    div>
  div>
template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'CardView'

})
script>

<style scoped lang="scss">
.slot {
  color: red;
}
style>

问题: 我不想显示插槽内容了该怎么办?

<-- 这里是我们的App根组件 !-->

<template>
  <Card /> <-- 只需要把子组件标签改一下就好了 !-->
template>
<script>
import Card from '@/components/Card' <-- 引入子组件 !-->
export default {
  components: {
    Card
  }
}
script>
<style lang="scss" scoped>

style>

所以综合以上说的, 插槽内容是根据父组件决定显示隐藏的

---

2. 作用域插槽

鸽子中... 过年和ts一起更新哦~