自定义组件Slots

文章目录

• 前言
• 一、插槽？
• 二、使用步骤
  • 1.在components文件夹中新建MyButton.vue文件
  • 2.在views下面写SlotBtn.vue文件
• 运行图

---

前言

提示：这里可以添加本文要记录的大概内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、插槽？

示例：插槽是子组件提供给父使用的一个占位符，

二、使用步骤

1.在components文件夹中新建MyButton.vue文件

代码如下（示例）：

<template>
  <button>
    <slot>插槽</slot>
    <slot name ="img"></slot>
  </button>
</template>

2.在views下面写SlotBtn.vue文件

代码如下（示例）：

<template>
  <button>登录</button>
  <button><i>注册</i></button>
  <b-btn>
    <template v-slot:img>
      <img src="../assets/logo.png" alt="">
    </template>
  </b-btn>
</template>
<script>
import MyButton from '../components/MyButton.vue';

export default {
  components: {
    'b-btn': MyButton,
  },
};
</script>

---

运行图