vue-弹窗公共组件定义

最新推荐文章于 2024-06-11 17:24:40 发布

不要香菜037

最新推荐文章于 2024-06-11 17:24:40 发布

阅读量280

点赞数

分类专栏： vue2.6 文章标签： vue

本文链接：https://blog.csdn.net/qq_34101362/article/details/114795260

版权

本文介绍了如何在Vue中创建一个弹窗公共组件，通过$emit和props实现父子组件间的通信，详细说明了组件定义及样式设置，并提供了图示辅助理解。

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

将弹窗组件定义出来

先定义一个单独组件modal.vue,$emit子传父，props:父传子

<template>
  <transition name="slide">
    <div class="modal" v-show="showModal">
      <div class="mask"></div>
      <div class="modal-dialog">
        <div class="modal-header">
          <span>{
   {
   title}}</span>
          <a href="javascript:;" class="icon-close" @click="$emit('cancel')"></a>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
          <a href="javascript:;" class="btn" v-if="btnType==1" @click="$emit('submit')">{
   {
   sureText}}</a>
          <a href="javascript:;" class="btn" v-if="btnType==2" @click=