Vue.js学习笔记——12.组件化开发（三）-CSDN博客

本文链接：https://blog.csdn.net/DDDDDecade/article/details/110679947

八、插槽slot的使用

slot意为插槽，组件的插槽是为了让我们封装的组件更具有扩展性，能够让使用者决定组件的内部的一些内容到底展示什么。组件在复用时不会完全一样，会根据应用场景不同做出相应改变，如果说组件模板内写的是组件的共性，那么插槽就保留了它复用时的特性。
要使用插槽，在组件模板内部定义一个slot标签即可，意为在组件内预留了一个插槽。在使用组件时往组件标签内部添加标签，添加的标签会替换插槽所在的位置。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn>
    <span>我是插槽</span>
  </cpn>
  <cpn>
    <button>按钮</button>
  </cpn>
  <cpn>
    <i>我是插槽</i>
    <p>我是p元素</p>
    <div>我是div元素</div>
  </cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是内容</p>
    <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el:"#app",
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>
</body>
</html>

执行结果：
插槽的使用
可见在组件标签内写多个标签的话，会将全部内容与插槽替换。
还可以在定义插槽时添加默认值，在使用时如果没有用插槽，插槽就会显示默认值。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn>
    <i>我是插槽</i>
  </cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是内容</p>
    <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>

执行结果：
插槽的默认值

九、具名插槽的使用

有时我们可能会同时使用多个插槽，但如果直接定义多个插槽然后使用的话，会直接替换掉所有没有名字的插槽。这时就需要给插槽取不同的名字，然后在使用时说明替换的是哪个插槽。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn><span slot="center">替换的标签</span></cpn>
  <cpn>
    <span slot="left">替换的标签</span>
    <button slot="right">返回</button>
  </cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left">左边</slot>
    <slot name="center">中间</slot>
    <slot name="right">右边</slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el:"#app",
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>
</body>
</html>

执行结果：

需要注意的是Vue2.6更新了具名插槽的使用方法，使用插槽时需要用template标签包裹并用v-solt指定替换的插槽名。
举例：

<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn>
    <template v-slot:center>
      <span>替换的标签</span>
    </template>
  </cpn>
  <cpn>
    <template v-slot:left>
      <span>替换的标签</span>
    </template>
    <template v-slot:right>
      <button>返回</button>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left">左边</slot>
    <slot name="center">中间</slot>
    <slot name="right">右边</slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el:"#app",
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>
</body>
</html>