首页 > 其他分享 >vue实现Popup弹窗

vue实现Popup弹窗

时间:2022-09-29 21:35:04浏览次数:50  
标签:vue 个父 十子 Popup 组件 弹窗

 

1. 首先我们新建一个Popup.vue,这个组件有一个关闭按钮。

这个组件十子组件传值个父组件,通过$emit发送值给父组件。

 

 

 

 

 

2.父组件导入使用组件,定义点击事件

 

标签:vue,个父,十子,Popup,组件,弹窗
From: https://www.cnblogs.com/hechunfeng/p/16743123.html

相关文章

  • vue 动态组件component :is
    示例<componentv-bind:is="currentComponent"></component>currentComponent是要展示的组件,根据具体代码逻辑,currentComponent赋值为不同的组件在切换时保持组件状态,......
  • vue route路由使用
    <router-linkto="/home">home</router-link><router-link:to="{name:'user',params:{userId:'123'}}">user</router-link><router-link:to="{path:'/user',......
  • vue computed传参
    通过不同的数据,计算属性返回不同的结果,就需要给计算属性传参,通过返回一个带参数的箭头函数,可以实现计算属性传参computed:{//计算属性computedData(){//......
  • vue2转vite判断当前运行环境
    vue2转vite判断当前运行环境vue2判断当前运行环境使用的是process.env.NODE_ENV==='development',而当转为vite项目时,process会报错,这里环境的判断应该改为import.meta.......
  • 【Vue项目实践】套用github 上的项目(vue3 + Element Plus)运行 可编辑表格
    在Vue3+ElementPlus中生成动态表格gitclonehttps://github.com/kalacloudCode/how-to-build-dynamic-table-in-vue-element-plus.git参考博客:vue3+ElementPlus......
  • 【Vue项目实践】(vue3 + Element Plus)excel 导出
    安装依赖yarnadd--savexlsxfile-saver1、添加导出按钮以及点击事件<el-buttontype="primary"round@click="exportClick">导出表格</el-button>2、在table表格中添加......
  • vue3 pc端页面全屏
    先看效果图: 附上代码: <template><el-button@click="hand">{{fullscreen?'取消全屏':'点击全屏'}}</el-button></template><script>import{ref}......
  • mac解决~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual m
    mac在使用vue-cli创建项目的时候,会出现这个错误 ERROR ~/.vuercmaybeoutdated.Pleasedeleteitandre-runvue-cliinmanualmode.   这是在~/下面有一个......
  • vue引入图片的方式
    一、img标签1、静态引入(静态路径加载)相对路径<imgclass="pic-404__childleft"src="../../assets/404_images/404_cloud.png"alt="404">绝对路径<imgclass......
  • Vue 超长列表渲染性能优化
    参考:https://juejin.cn/post/6979865534166728711#heading-3组件懒加载参考:https://github.com/xunleif2e/vue-lazy-component......