vue3-组件式弹窗打开的3种方式

这篇具有很好参考价值的文章主要介绍了vue3-组件式弹窗打开的3种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、利用父子组件传值

2、利用ref

3、provide和inject


1、利用父子组件传值

父组件:

<template>
  <div>
    <a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
    <OnlineModal :controlVisible="visibleIt" @closeModal="visibleIt=false"/>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
  components: {
    OnlineModal
  },
  setup() {
    const route = useRoute()
    const visibleIt = ref<boolean>(false)
    const showModal = () => {
      visibleIt.value = true
    }
    return {
      route,
      visibleIt,
      showModal
    }
  }
})
</script>
  

子组件:

<template>
  <a-modal :visible="controlVisible" title="发布上线" @ok="handleOk" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
    </template>
    <h1>注意事项</h1>
          <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
            <li>上线时间:19:00-23:00禁止(流量高峰),紧急上线联系开发。</li>
            <li>上线间隔:3分钟内只能上线一次,防止新内容过多时执行慢。</li>
            <li>上线成功:出现“上线成功”弹窗,即完成本次上线。</li>
            <li>上线频率:少量多次,请勿积攒过多新内容,以免影响用户流量。</li>
          </ol>
  </a-modal>
</template>
<script lang="ts">
import {  ref } from 'vue'
import {postRelease} from '@/services/online'
import { message } from 'ant-design-vue';
export default ({
  props:['controlVisible'],
  setup(props, {emit}) {
    console.log(props.controlVisible);
    const loading = ref<boolean>(false)
    const handleOk = () => {
      loading.value = true
      postRelease().then( res => {
        console.log(res, '----');
        debugger
        message.success('上线成功')
        loading.value = false
     }).catch(err => {
        message.error({
            title: '错误提示',
            content: err?.response?.data?.msg || '上线失败'
        })
        loading.value = false
     })
      
      emit('closeModal')
    }
    const handleCancel = () => {
        emit('closeModal')
    }
    return {
       loading,
        handleOk,
      handleCancel
    }
  }
})
</script>

2、利用ref

父组件:

<template>
  <div>
    <a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
    <OnlineModal ref="onlineModal" />
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
  components: {
    OnlineModal
  },
  setup() {
    const route = useRoute()
    const onlineModal = ref<boolean>(false)
    const showModal = () => {
      onlineModal.value.openModal()
    }
    return {
      route,
      showModal,
      onlineModal
    }
  }
})
</script>
  

子组件:

<template>
  <a-modal :visible="controlVisible" title="发布上线" @ok="openModal" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
    </template>
    <h1>注意事项</h1>
          <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
            <li>上线时间:19:00-23:00禁止(流量高峰),紧急上线联系开发。</li>
            <li>上线间隔:3分钟内只能上线一次,防止新内容过多时执行慢。</li>
            <li>上线成功:出现“上线成功”弹窗,即完成本次上线。</li>
            <li>上线频率:少量多次,请勿积攒过多新内容,以免影响用户流量。</li>
          </ol>
  </a-modal>
</template>
<script lang="ts">
import {  ref } from 'vue'
import {postRelease} from '@/services/online'
import { message } from 'ant-design-vue';
export default ({
  setup(props, {emit}) {
    const controlVisible = ref<boolean>(false)
    const loading = ref<boolean>(false)
    const openModal = () =>{
        controlVisible.value = true
    }
    const handleOk = () => {
        openModal()
      loading.value = true
      postRelease().then( res => {
        console.log(res, '----');
        debugger
        message.success('上线成功')
        loading.value = false
        handleCancel()
     }).catch(err => {
        message.error({
            title: '错误提示',
            content: err?.response?.data?.msg || '上线失败'
        })
        loading.value = false
        handleCancel()
     })
    }
    const handleCancel = () => {
        controlVisible.value = false
    }
    return {
       loading,
        handleOk,
        openModal,
      handleCancel,
      controlVisible
    }
  }
})
</script>

3、provide和inject

在父组件中通过provide暴露属性或方法,子组件通过inject接受,并且只要是父组件的后代,都可以通过inject接收到父组件暴露的值

父组件:

<template>
  <div>
    <a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
    <OnlineModal />
  </div>
</template>
  
<script lang="ts">
import { defineComponent, provide, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
  components: {
    OnlineModal
  },
  setup() {
    const route = useRoute()
    const controlIfVisible = ref<boolean>(false)
    provide('controlIfVisible', controlIfVisible)
    const showModal = (sonValue) => {
      controlIfVisible.value = sonValue
    }
    provide('handle', showModal)
    return {
      route,
      showModal,
      controlIfVisible
    }
  }
})
</script>
  

子组件:文章来源地址https://www.toymoban.com/news/detail-512028.html

<template>
  <a-modal :visible="controlVisible" title="发布上线" @ok="handleOk" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
    </template>
    <h1>注意事项</h1>
    <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
      <li>上线时间:19:00-23:00禁止(流量高峰),紧急上线联系开发。</li>
      <li>上线间隔:3分钟内只能上线一次,防止新内容过多时执行慢。</li>
      <li>上线成功:出现“上线成功”弹窗,即完成本次上线。</li>
      <li>上线频率:少量多次,请勿积攒过多新内容,以免影响用户流量。</li>
    </ol>
  </a-modal>
</template>
<script lang="ts">
import { ref, inject } from 'vue'
import { postRelease } from '@/services/online'
import { message } from 'ant-design-vue'
export default {
  setup(props) {
    const loading = ref<boolean>(false)
    const controlVisible = inject('controlIfVisible')
    const handle: any = inject('handle')
    const handleOk = () => {
      handle(true)
      loading.value = true
      postRelease()
        .then((res) => {
          console.log(res, '----')
          debugger
          message.success('上线成功')
          loading.value = false
          handleCancel()
        })
        .catch((err) => {
          message.error({
            title: '错误提示',
            content: err?.response?.data?.msg || '上线失败'
          })
          loading.value = false
          handleCancel()
        })
    }
    const handleCancel = () => {
      handle(false)
    }
    return {
      loading,
      handleOk,
      handleCancel,
      controlVisible
    }
  }
}
</script>

到了这里,关于vue3-组件式弹窗打开的3种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下: props数据只读,从父组件传递到子组件,子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种:原生的DOM事件和自定

    2024年02月13日
    浏览(49)
  • Vue3组件间的通信方式

    目录  1.props父向子组件通信 2.自定义事件 子向父组件通信 3.全局事件总线 4.v-model组件通信(父子组件数据同步) 绑定单个数据同步  绑定多个数据同步  5.useAttrs组件通信  6.ref与$parent ref获取子组件实例对象  $parent获取父组件实例对象  7.provide-inject 可以实现隔辈传输 8.

    2024年02月17日
    浏览(44)
  • vue3中的组件传值的方式

    1. props 父组件使用 props 传递数据给子组件: 子组件使用 props 接收: 2. emit 自定义事件 子组件触发事件,父组件监听该事件并更新数据: 3. refs 通过 ref 给子组件绑定引用,然后通过该引用直接更新子组件的数据或调用子组件的方法: 在 child 组件中: 4. provide / inject 父组件提供数据

    2024年02月07日
    浏览(33)
  • 在vue3中定义组件的5种方式

    Vue 正在不断发展,目前在 Vue3 中定义组件的方法有多种。从选项式到组合式再到类 API ,情况截然不同。本文将会定义一个简单的组件并使用所有可用的方法重构它。 这是在 Vue 中声明组件的最常见方法。从 Vue1 就开始存在了,我们很可能已经熟悉它了。一切都在对象内部声

    2024年02月13日
    浏览(31)
  • vue3 组件间通信的方式(setup语法糖写法)

    该方式用于父传子,父组件以数据绑定的形式声明要传递的数据,子组件通过defineProps()方法创建props对象,即可拿到父组件传来的数据。 2. emit方式 emit 方式也是Vue中最常见的组件通信方式,该方式用于 子传父。 3、defineExpose 利用defineExpose+ref 可以得到组件里的方法和变量

    2024年02月12日
    浏览(46)
  • element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)

    目录 1.组件源码  2.html 代码 3.组件源码  此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的,word、excel是直接下载、pdf浏览器打开的形式,如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。 1.组

    2024年02月11日
    浏览(71)
  • 小程序隐私保护授权处理方式之弹窗组件

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的🪜 小程序隐私保护授权弹窗组件 调用wx.getUserProfile进行授权时,返回错误信息:{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因

    2024年02月10日
    浏览(45)
  • vue element ui 打开弹窗出现黑框问题

    大家好!今天是 2024年4月20日 | 农历三月十二 ,周六的我又做在公司里面写起了代码 今天在做项目的时候遇到一个奇怪的问题,如下图所示: 因为这个页面我做了两个弹框,先弹出来第一个弹框,然后再通过第一个弹框打开第二个弹框,当打开第二个弹框的时候,就会出现

    2024年04月25日
    浏览(35)
  • Vue3封装可拖拽的弹窗

    核心代码(复制就可以使用了) 使用方式

    2024年01月19日
    浏览(41)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包