插槽的基本使用（slot）

最新推荐文章于 2024-07-26 13:02:41 发布

407指导员

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111709608

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

插槽的基本使用（slot）

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性。

让使用者可以决定组件内部的一些内容到底展示什么。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot基本使用</title>
</head>
<body>
<div id="app">
  <cpn><button>按钮一</button></cpn>
  <cpn><span>插槽二</span></cpn>
  <cpn><i>我自定义标签插槽</i></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是组件</p>
    <slot><p>我是默认值，如果插槽没有添加，使用默认值</p></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  });
</script>
</body>
</html>

插槽预留位置，为日后扩展做准备，直接在模板中使用slot标签即可。

插槽可以有默认值，直接在slot里设置组件，可以是自定义组件，也可以是系统标签。使用时直接在自定义标签里填充，扩展内容（可以是另外一个组件，套娃）。如果没有填充，使用默认值填充。

插槽只有一个slot标签，不意味着只能在组件标签里填充一个html标签，可以填充任意个，整体用来替换插槽。
<div id="app">
  
  <cpn>
    <button>按钮一</button>
  </cpn>
  
  <cpn></cpn>
  
  <cpn><i>我自定义标签插槽</i></cpn>
  
  <cpn>
    <div>
      <p>p1</p>
      <p>p2</p>
    </div>
  </cpn>
</div>

具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
</head>
<body>
<div id="app">
  <cpn>
    <button slot="left">左边替换成按钮</button>
    <p slot="center">中间替换成p标签</p>
    <h2 slot="right">右边替换成h2标签</h2>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot name="left"><span>我是左边的</span></slot>
    <slot name="center"><span>我是中间的</span></slot>
    <slot name="right"><span>我是右边的</span></slot>
    <slot><span>没有名字的</span></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  });
</script>
</body>
</html>

模板里可以预留多个插槽，而非只有一个。

每个插槽可以取一个具体名字，也可以不取，如果不取，在组件里使用插槽，所有未取名字都会被替换。

我们可以给需要区域替换的插槽取名字，然后在组件使用时，具体标签/子组件里使用slot属性绑定插槽名字,就可以实现局部替换。

默认值/替换值如下：
<div>
  <slot name="left"><span>我是左边的</span></slot>
  <slot name="center"><span>我是中间的</span></slot>
  <slot name="right"><span>我是右边的</span></slot>
  <slot><span>没有名字的</span></slot>
</div>

<cpn>
  <button slot="left">左边替换成按钮</button>
  <p slot="center">中间替换成p标签</p>
  <h2 slot="right">右边替换成h2标签</h2>
</cpn>

在这里插入图片描述