vue插槽的基本使用

1.什么是插槽

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

2.体验插槽的基础用法

在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。示例代码如下：

如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃

后备内容

如果组件的使用者没有为插槽提供任何内容，则后备内容(默认内容)会生效。

3.具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下：

<!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
<!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->
<slot name="default">
  <h6>这是 default 插槽的后备内容</h6>
</slot>

3.1为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。示例代码如下：

<Left>
  
  
  
  
  
  
  <template #default>
      <p>这是在 Left 组件的内容区域，声明的 p 标签p>
  template>
Left>

注意：v-slot指令，只能使用在组件里或template组件里，否则报如下错误

4.作用域插槽

在封装组件的过程中，可以为预留的插槽绑定 props 数据，这种带有 props 数据的叫做“作用 域插槽”。示例代码如下：

<slot name="content" msg="hello vue.js">slot>

4.1使用作用域插槽

可以使用 v-slot: 的形式，接收作用域插槽对外提供的数据。示例代码如下：

<template #content="obj">
   <div>
      <p>{{ obj }}p>
      <p>{{ obj.msg }}p>
   div>
template>

4.2解构插槽

可以使用解构赋值简化数据的接收过程。示例代码如下：

<template #content="{ msg }">
   <div>
      <p>{{ msg }}p>
   div>
template>

加深，示例代码：

<slot name="content" msg="hello vue.js" :user="userinfo">slot>
<script>
export default {
  data() {
    return {
      // 用户的信息对象
      userinfo: {
        name: 'zs',
        age: 20
      }
    }
  }
}
script>

<Article>
  <template #content="{ msg, user }">
      <div>
        <p>{{ msg }}p>
        <p>{{ user.name }}p>
       div>
   template>
Article>

参考资料