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

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

插槽的基础使用

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

1. 在子组件 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="请输入您的手机号码" /<