Vue中插槽的使用

普通插槽

<slot>默认值</slot>

具名插槽

slot 有name属性，可以有多个具名插槽

任何没有被包裹在带有v-slot 中的内容都会被视为默认插槽的内容

<base-layout> 组件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件引入<base-layout>组件

<base-layout>
  <template v-slot:header>
    <h1>我是头部header</h1>
  </template>

  <p>未指定的内容默认归结为匿名插槽内容1</p>
  未指定的内容默认归结为匿名插槽内容2

  <template v-slot:footer>
    <p>我是尾部footer</p>
  </template>
</base-layout>
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

作用域插槽

• 父级模板里的所有内容都是在父级作用域中编译的；
• 子模板里的所有内容都是在子作用域中编译的。
• 作用域插槽让插槽内容能够访问子组件中才有的数据

子组件

 <slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
 
data() {
    return {
      user:{
        lastName:"张",
        firstName:"三"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默认数据  v-slot:todo 当父页面没有(="slotProps")时显示： 张

父页面重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

解构插槽Prop

父组件

<todo-list>
 <template v-slot:todo="{user,test}" >
   {{user.firstName}}  //此处原来需要写为{{slotProps.user.firstName}}
 </template> 
</todo-list> 
结果：// yue

子组件

<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
</slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
 
## 显示 ##
// yue

独占默认插槽

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用

父组件

//原本是需要写template
<todo-list>
 <template v-slot:default="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 

<!--当被提供的内容只有默认插槽时 v-slot等属性可以直接写在组件标签上-->

<todo-list v-slot:default="slotProps" >
   {{slotProps.user.firstName}}
</todo-list> 

//或者简写
<todo-list #default="slotProps">
   {{slotProps.user.firstName}}
</todo-list> 

子组件

---

<slot :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
## 显示 ##
// yue

缩写形式

跟v-on和v-bind一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如: v-slot:header 可以被重写为#header

<base-layout>
  <template #header>
    <h1>我是头部header</h1>
  </template>

  <p>未指定的内容默认归结为匿名插槽内容1</p>
  未指定的内容默认归结为匿名插槽内容2

  <template #footer>
    <p>我是尾部footer</p>
  </template>
</base-layout>