第八十九篇：Vue 重学插槽slot

好家伙,

 

1.什么是插槽?

插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时,

把不确定的,希望由用户指定的部分定义为插槽

 

我们依然可以把它理解为一个占位符

 

1.1.插槽的基本用法

试例项目目录如下:

 

 

在Left.vue组件中:

<template>
<div>
    <!-- 声明一个插槽区域 -->
    <slot></slot>
</div>
</template>

 

在App.vue组件中:

<template>
  <div>
    <Left>
      <p>我是用来测试插槽的p标签
      </p>
    </Left>
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  data(){
    return{
      comName:'Left'
    }
  },
     components:{
        Left,
        Right 
       //简写为 Left
     }
}
</script>

 

1.2.为插槽添加名称属性:

<template>
<div>
    <!-- 声明一个插槽区域 -->
    <slot name="default"></slot>
</div>
</template>

在这里可以定义插槽的名称,

若不进行定义,则默认添加名称default

 

2.v-slot指令

作用:将该标签中的内容放到指定的标签中去渲染

首先说明,vue的官方文档说明了,这个指令只能被用于

<template></template>标签和组件中

 

使用格式:

在App.vue组件中:

<template>
  <div>
    <Left>
      <!-- 1.如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令 -->
      <!-- 2.v-slot:后面要跟上插槽的名字 -->
      <!-- 3.v-slot:指令不能直接用在元素身上,必须用在template标签上 -->
      <!-- 4.template这个标签,他是一个虚拟的标签,只起到包裹性质的作用,但是不会被渲染为任何实质性的html元素 -->
      <template v-slot:default>
        <p>我是用来测试插槽的p标签</p>
      </template>
      
    </Left>
  </div>
</template>

 

2.1.缩写

v-slot的缩写为#

<template v-slot:default>
        <p>我是用来测试插槽的p标签</p>
      </template>

<template #default>
        <p>我是用来测试插槽的p标签</p>
      </template>

以上两者等效

 

3.插槽的后备内容,

封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供

任何内容，则后备内容会生效。(也就是备胎)

在Left.vue组件中:

<template>
<div>
    <!-- 声明一个插槽区域 -->
    <!-- vue官方规定:每个slot插槽,都要有一个name名称 -->
    <!-- 如果省略了slot的name属性,则有一个默认名称叫做 default-->
    <slot name="default">
        <h1>我是后备内容</h1>
    </slot>
</div>
</template>