slot插槽

Posted 2021-07-28 So istes immer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了slot插槽相关的知识，希望对你有一定的参考价值。

1.引入

使用插槽的目的是让我们的组件更加有扩展性
让使用者决定组件内部的内容，决定展现什么
比如，移动网站中的导航栏
我们把导航栏封装成一个nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用了
但是，每个页面的组件会有共性，也会有自己的独特性
这个时候就要用到插槽了
我们这样封装组件：将共性抽取出来，将独特性暴露为插槽，在插槽中我们可以根据自己的需求决定插入什么内容

2.基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn><span>哈哈</span></cpn>
  <cpn>
    <i>生如逆旅</i>
    <div>一苇以航</div>
  </cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <slot></slot>
<!--    slot标签里面可以加个默认值-->
    <slot><button>按钮</button></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    components: {
      cpn: {
        template: `#cpn`,
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

3.给插槽添加name属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  找到对应的slot进行替换，-->
  <cpn><button slot="left">返回</button><span slot="center">标题</span></cpn>
<!--  对于那些有name的插槽，如果这里不指定是哪个slot，就不替换-->
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    components: {
      cpn: {
        template: `#cpn`,
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

以上是关于slot插槽的主要内容，如果未能解决你的问题，请参考以下文章