Vue插槽的用法（附带实例）

插槽是指 HTML 起始标签与结束标签中间的部分，通常在使用 div 标签时，其内部的插槽位置既可以放置要显示的文案，又可以嵌套放置其他标签。

例如：

<div>文案部分</div>
<div>
  <button>按钮</button>
</div>

插槽的核心作用是将组件内部的元素抽离给外部进行实现，在进行自定义组件的设计时，良好的插槽逻辑可以使组件的使用更加灵活。

对于开发容器类型的自定义组件来说，插槽就更加重要了，在定义容器类的组件时，开发者只需要将容器本身编写好，其内部的内容都可以通过插槽来实现。

组件插槽的基本用法

首先，创建一个名为 demo.slot.html 的文件，在其中编写如下核心示例代码：

<body>
  <div id="Application">
    <my-container></my-container>
  </div>

  <script>
    const { createApp } = Vue;
    const App = createApp({});

    // 定义一个容器组件
    const containerComponent = {
      template: `<div style="border-style:solid;border-color:red;border-width:10px"></div>`
    };

    App.component("my-container", containerComponent);
    App.mount("#Application");
  </script>
</body>

在上述代码中，我们定义了一个名为 my-container 的容器组件。这个容器本身非常简单，只是添加了红色的边框，如果直接向容器组件内部添加子元素，是不可行的，例如：

<my-container>组件内部</my-container>

运行代码，你会发现组件中并没有任何文本被渲染，若需要自定义组件支持插槽，则需要使用 slot 标签来指定插槽的位置。

修改组件模板如下：

const containerComponent = {
  template: `<div style="border-style:solid;border-color:red;border-width:10px">
    <slot></slot>
  </div>`
};

再次运行代码，可以看到 my-container 标签内部的内容已经被添加到了自定义组件的插槽位置，如下图所示：

图 1 自定义组件的插槽

虽然在之前的示例代码中，我们仅使用了文本作为插槽的内容，但实际上 Vue 的插槽机制支持放置任意的 HTML 标签、组件或其他内容。这为组件提供了极高的灵活性和可扩展性。

对于支持插槽的组件，我们可以为其定义默认内容。这样，当组件在使用时，如果没有明确设置插槽内容，组件将自动渲染这些默认内容。例如：

<div id="Application">
  <my-container></my-container>
</div>

<script>
  const App = Vue.createApp({});

  const containerComponent = {
    template: `<div style="border-style:solid;border-color:red;border-width:10px">
      <slot>插槽的默认内容</slot>
    </div>`
  };

  App.component("my-container", containerComponent);
  App.mount("#Application");
</script>

需要注意，一旦组件在使用时设置了插槽的内容，则默认内容就不会再被渲染。

Vue插槽的用法（附带实例）

组件插槽的基本用法

相关文章