vue组件 slot 入门---弹窗组件

最新推荐文章于 2024-05-14 15:00:08 发布

住汪星球的喵星人

最新推荐文章于 2024-05-14 15:00:08 发布

阅读量564

点赞数 1

本文链接：https://blog.csdn.net/weixin_43117402/article/details/105662017

版权

本文介绍了Vue.js中的slot插槽概念，它允许父组件在子组件内部插入内容。通过示例展示了如何在子组件Modal.vue中预留插槽以及父组件如何根据需求传递不同的内容到插槽，实现弹窗组件的个性化展示。

摘要由CSDN通过智能技术生成

slot 即插槽，相当于在子组件的 DOM 中留一个位置，父组件如果有需要，就可以在插槽里添加内容。

插槽的基础使用

这里是一个插槽的简单用法。

在子组件 Modal.vue 中用 slot 标签预留一个位置，slot 标签中的内容是后备内容，也可以为空：

<div class="modal-content">
  <slot>这是个弹框</slot>
  <div class="footer">
    <button @click="close">close</button>
    <button @click="confirm">confirm</button>
  </div>
</div>

后备内容：当父组件不在插槽里添加内容时，插槽显示的内容。

2.在父组件中使用子组件

在父组件中使用子组件，但不向自定义组件的插槽 slot 中添加内容：

<Modal :visible.sync="visible"></Modal>

此时如果打开弹框，弹框中显示的是后备内容“这是个弹框”：
在这里插入图片描述

在父组件中使用子组件，并给插槽加入个性化内容：

<Modal :visible.sync="visible">个性化内容</Modal>

此时如果打开弹框，弹框中显示的是“个性化内容”：
在这里插入图片描述
弹窗组件
父App.vue

<template>
  <div id="app">
    <button @click="visible = true" class="btn">打开“留言”弹框</button>
    <button @click="visibleApply = true" class="btn">打开“成为大牛”弹框</button>

    <!-- “留言”弹框 -->
    <Modal
      customClassName="textarea-modal"
      title="留言"
      :visible.sync="visible"
      @confirm="confirm"
    >
      <template>
        <div class="txt">留下你想告诉我们的话...</div>
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="请写下您的宝贵意见"
        ></textarea>
      </template>
    </Modal>

    <!-- “成为大牛”弹框 -->
    <Modal
      customClassName="apply-modal"
      title="成为大牛"
      :visible.sync="visibleApply"
      @confirm="confirm"
    >
      <template>
        <div class="txt">留下联系方式，立即成为大牛</div>
        <div class="mobile">
          <input type="text" placeholder="请输入您的手机号码" />
        </div>
        <