31-33 插槽Slots

基础

也是用来进行组件间的数据传输（父传子），内容是 模板的HTML内容

进阶

1. 渲染作用域：父级组件传输动态内容，在父级组件中定义数据
2. 插槽默认值： 插槽默认值，有内容传输过来的话，则不显示
3. 具名插槽：一个组件可以有多个插槽，为不同的插槽传输不同的内容，需要具体指定的名字name。

终极

在子组件中添加数据，父组件接收，然后再是 父组件传输内容给子组件。 那么，插槽中既有 父组件内容也有子组件的内容了

插槽就这么多内容了
1.App.vue

<template>
  <div>
    <!-- Slots_Base v-slot="slotProps" 接收子组件传过来的数据  -->
    <Slots_Base >
      <!-- 3.具名插槽，必须要在 template 模块中 -->
      <template v-slot:s1 >
        <p>具名插槽1：slot标题1</p>
        <!-- 1. 父级组件传输动态内容：在父级组件中定义数据 -->
        <p>{{ message }}</p>
      </template>

      <!-- v-slot: 可以简写 # -->
      <!-- 具名插槽 实现 父子组件相互传输数据 #s2="slotProps" -->
      <template #s2="slotProps" >
        <p>具名插槽2：slot标题2</p>
        <!-- 1. 父级组件传输动态内容：在父级组件中定义数据 -->
        <p>{{ message }}- {{ slotProps.msg }} </p>
      </template>
     </Slots_Base>

     <!-- 普通插槽 -->
    <A v-slot="slotProps">
    <h3> {{ message }}- {{ slotProps.msg }}</h3>
    </A>
  </div>
</template>

<script>
import Slots_Base from './components/Slots_Base.vue';
import A from './components/A.vue';
  export default {
    data() {
      return {
        message: "slot内容"
      }
    },
    components: {
      Slots_Base,
      A
    },
  }
</script>

<style lang="scss" scoped>

</style>

2. 子组件1

<template>
    <div>
        <h3>基础插槽知识</h3>
        <!-- 2.插槽默认值，有内容传输过来的话，则不显示 -->
        <slot name="s1">插槽默认值，有内容传输过来的话，则不显示</slot>
        <hr>
        <slot name="s2" :msg="ChildMessage01"></slot>
        <hr>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ChildMessage01: "子组件的数据"
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

3. 子组件2

<template>
    <div>
        <slot :msg="ChildMessage"></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ChildMessage: "子组件数据"
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>