Vue slot具名插槽和props

目录

slot 具名插槽

示例

props单向数据流

基本用法:

基本应用场景:

实例

---

slot 具名插槽

what : 在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容

why : 为了让组件具备更强的通用性,不将自己暗中的内容限制为固定的div、span等元素,则可使用具名插槽

how : 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制.

语法: <slot name = '名称'>默认值</slot>,

示例

在子组件 StuSlot.vue中定义两个具名插槽

<template>
  <div class="about">
    <h1>This is a Children page</h1>
    <!-- 给插槽添加name属性,便成为具名插槽 -->
    <!-- 定义两个具名插槽-->
    <slot name="one"></slot>
    <slot name="two"></slot>
  </div>
</template>

在父组件App.vue中:

为验证，子组件中的插槽可以填充任何结构的内容，所以专门在one插槽中插入一个组件，而在