Vue中的插槽

# 什么是插槽

插槽（Slot）：是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。

# 插槽内容

1.没有插槽你在组件中写的内容会被忽略。

<template>   <div class="right-container">     <Left>       <p>这是Left组件的内容区域,声明p标签</p>     </Left>   </div> </template> // 因为没有给Left组件声明插槽，所以p标签不起作用

2.声明插槽，每个插槽都有name名称（默认为default）

<template>   <div class="left-container">     <h3>Left 组件</h3>     <hr>     <!-- 声明一个插槽slot -->     <!-- vue官方规定:每个slot插槽都有一个 name名称 -->     <!-- 如果省略slot名称,则默认名称为default -->     <!-- 当用户没有指定插槽是默认内容是slot标签里的内容 -->     <slot name="default">这是default插槽默认的内容</slot>   </div> </template>

3.v-slot指令：将内容渲染到指定的插槽中（没写 v-slot 则默认渲染到 default 的插槽中）

<template>   <div class="app-container">     <h1 v-color="color">App 根组件</h1>     <p v-color="'pink'">测试</p>      <button @click="color = 'green'">改变color颜色值</button>     <hr>     <div class="box">       <!-- 渲染 Left 组件和 Right 组件 -->        <Left style="display: none;">         <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽中 -->         <!-- 1.如果要把内容填充到指定的名称的插槽中,需要v-slot:这个指令 -->         <!-- 2.v-slot:要跟上插槽的名称 -->         <!-- 3.v-slot:指令不能用在元素身上,只能用在template上 -->         <!-- 4.template这个标签是一个虚拟的标签,只起到包裹的作用,但不会被渲染成实质性的html元素-->         <!-- 5.v-slot: 简写为# -->          <template v-slot:default>           <p>这是Left组件的内容区域，声明p标签</p>         </template>       </Left>     </div>   </div> </template>

# 后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中：

<!-- 我们希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内 --> <button type="submit">   <slot>Submit</slot> </button>  <!-- 现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时： --> <submit-button></submit-button> <!-- 此时 Submit 就会渲染到父级组件中 -->  <!-- 但是如果我们提供内容时，这个提供的内容将会被渲染从而取代后备内容： --> <submit-button> <!-- Save就会代替Submit渲染到父级组件中 -->   Save </submit-button>

# 具名插槽

在同一个组件中，我们有时需要多个插槽作为预留区域，此时，应该给每一个插槽取一个不同的name名称

如：定义了Article组件，并设置了多个插槽，一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

<template>   <div class="article-container">       <!-- 渲染文章的标题 -->       <div class="header-box">           <slot></slot>       </div>        <!-- 文章的内容 -->       <div class="content-box">           <slot></slot>       </div>        <!-- 文章的作者 -->       <div class="footer-box">           <slot></slot>       </div>   </div> </template>  <!-- 这时，三个插槽名相同为default，在<Article></Article>中写入的内容会同时渲染到名称相同的插槽： --> <template>   <div class="right-container">     <h3>App 组件</h3>      <Article>       <h3>一首诗</h3>       <!-- 上面三个插槽都渲染了内容 “一首诗”-->     </Article>   </div> </template>

# 作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

比如：在子组件Article中设置了 msg，如果插槽内容中要访问到该数据，则：

<template>   <div class="right-container">     <h3>Article 组件</h3>      <div class="content-box">       <!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做"作用域插槽" -->       <slot name="content" msg="hello vue.js"></slot>     </div>   </div> </template>  <!-- 在上块代码中，设置了msg="hello vue.js"，我们此时需要在插槽内容区内拿到该数据： --> <!-- 插槽内容部分 --> <Article>   <!-- #content="obj"中的obj是一个对象，里面包含了Article组件中msg："hello vue.js"等<slot></slot>中定义的数据 -->   <template #content="obj">          <div>           <p>床前明月光,疑是地上霜.</p>           <p>举头望明月,低头思故乡.</p>           <p>{{ obj.msg }}</p>         </div>       </template> </Article> <!-- 这里的msg就能获取到成功渲染 -->

创作不易，一键三联吧！铁汁们！！！