Vue组件开发--插槽使用详解

一、概述

在进行Vue组件开发时，当组件内某一部分标签不确定，或者补应该按固定标签来写死模板代码时。

我们可以对不确定的位置，定义一个插槽，等待调用者调用该组件的时候再把内容传入。

这样一来组件就拥有了更强的通用性。该插槽插入什么内容完全取决于父组件如何使用。

二、如何使用插槽

2.1 基本使用

1）使用步骤

• 组件内使用占位

• 使用组件时，在组件标签夹着的地方, 传入标签替换到slot位置上

2）代码示例

子组件：

<template>
  <h2>{{ title }}</h2>
  <div class="content">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: "title的默认值"
      }
    }
  }
</script>

父组件：

<template>
  <div class="app">
    <!-- 1.内容是button -->
    <show-message title="哈哈哈">
      <button>我是按钮元素</button>
    </show-message>

    <!-- 2.内容是超链接 -->
    <show-message>
      <a href="#">百度一下</a>
    </show-message>

    <!-- 3.内容是一张图片 -->
    <show-message>
      <img src="@/img/kobe02.png" alt="">
    </show-message>

    <!-- 4.内容没有传递 -->
    <show-message></show-message>
  </div>
</template>

<script>
  // 组件引入
  import ShowMessage from './ShowMessage.vue'

  export default {
    // 组件注册
    components: {
      ShowMessage
    }
  }
</script>

由于使用了插槽，所以可以传递按钮、超链接、图片等任何DOM元素。组件、普通文本内容都时可以的。

插槽的内容完全取决于父组件使用子组件时传递的元素。

2.2 设置插槽的默认内容

如果父组件没有给插槽传递内容时，我们可以给插槽设置默认内容。

只需要在定义插槽的标签夹着的位置写上内容，这个内容只会在没有提供插入的内容时，才会显示。

这就是插槽的默认值。

<template>
  <div class="content">
    <slot>
    	插槽的默认值
    </slot>
  </div>
</template>

2.3 具名插槽

如果一个组件中含有多个插槽，那父组件传递的内容会渲染到那一个插槽上面呢？

它会把传递的内容同时渲染到三个插槽上，三个插槽获得的内容完全一样。

为了解决这个问题，我们可以给插槽起一个名字。以此来确定父组件传递的内容属于哪一个插槽。

子组件：

<template>
  <div class="nav-bar">
    <div class="left">
     <!-- name属性可以给插槽取一个名字 -->
      <slot name="left">left</slot>
    </div>
    <div class="center">
      <slot name="center">center</slot>
    </div>
    <div class="right">
      <slot name="right">right</slot>
    </div>
  </div>

  <div class="other">
    <slot name="default"></slot>
  </div>
</template>

<script>
  export default {

  }
</script>

父组件：

<template>
  <nav-bar>
    <!-- v-solt指令 指定这个template属于哪一个插槽 -->
    <template v-slot:left>
      <button>{{ leftText }}</button>
    </template>
 	
	<!-- v-solt指令 可以简写为# -->
    <template #center>
      <span>内容</span>
    </template>

    <template v-slot:right>
      <a href="#">登录</a>
    </template>
  </nav-bar>
</template>

<script>
  // 组件引入
  import NavBar from './NavBar.vue'

  export default {
    // 组件注册
    components: {
      NavBar
    },
    data() {
      return {
        leftText: "返回"
      }
    }
  }
</script>

• 具名插槽顾名思义就是给插槽起一个名字，只需要在 标签上添加name属性

  一个不带 name 属性的slot，会有隐含的名字 default

• 父组件给插槽传递内容时，只需要使用