Vue 插槽使用总结

1.为什么使用插槽

slot翻译为插槽：

• 在生活中很多地方都用到插槽，电脑的USB插槽，插板有电源插槽。
• 插槽的目的是让我们原来的设备具有更多的扩展性。
• 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：

• 组件的插槽也是为了让我们封装的组件更加具有扩展性。
• 让使用者可以决定组件内部的一些内容到底展示什么。

2.插槽的使用

如何使用插槽：

• 在子组件中，使用特殊的元素< slot >就可以为子组件开启一个插槽。
• 该插槽插入什么内容取决于父组件如何使用。

下面先来看个简单例子：

1.创建一个Home.vue组件

<template>
  <div>
    <h1>我是Home组件</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

在template模板中定义了一个插槽< slot >，这样我们在使用这个组件时就可以插入任意标签。

2.在App.vue组件中注册Home组件并使用Home组件

<template>
  <div id="app">
    <h1>我是App组件</h1>
    
    <Home>
      <h2>我是slot的元素</h2>
    </Home>

    <Home>
      <p>我在插槽中可以任意使用标签</p>
    </Home>
    
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  name: "App",
  components: { Home },
};
</script>

<style>
</style>

从上面代码，我两次使用Home组件，而且分别向插槽传入不同的标签，就是为了显示slot的扩展性。
看效果: