vue打开子组件弹窗都刷新功能的实现


Posted in Javascript onSeptember 21, 2020

vue如何一打开子组件弹窗都刷新?

vue打开子组件弹窗都刷新功能的实现

在父页面中给子组件同时绑定:visible.sync和v-if

:visible.sync="paramAddDialog" v-if="paramAddDialog"

整体代码:

<el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog" v-if="paramAddDialog">
  <addParamForm ref="addParam" @boundSuccess="boundSuccess" @cancelBound="paramAddDialog=false"/>
</el-dialog>

OK:

vue打开子组件弹窗都刷新功能的实现

PS:下面看下VUE 父组件调用子组件弹窗

想搞一个新增编辑弹窗,和列表页面分开

先来一个父组件调用子组件弹窗的demo

父组件

<template>
  <div>
    <el-button @click="show">按钮</el-button>
    
    <!-- 新增编辑弹框子组件 -->
    <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></add-or-update>
  </div>
</template>

<script>
// 引入子组件
import AddOrUpdate from './Edit'
export default {
  data(){
    return{
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false
    }
  },
  // 使用子组件
  components:{
    AddOrUpdate
  },
  methods:{
    // 按钮点击事件 显示新增编辑弹窗组件
    show(){
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发,有子组件调用
    showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    }
  }
}
</script>

子组件:

<template>
  <el-dialog
    title="提示"
    :visible.sync="showDialog"
    width="50%"
    @close="handleClose">

    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="showDialog = false">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
export default {  
  // 接受父组件传递的值
  props:{
    addOrUpdateVisible:{
      type: Boolean,     
      default: false
    }
  },
  data(){
    return{
      // 控制弹出框显示隐藏
      showDialog:false
    }
  },
  methods:{
    // 弹出框关闭后触发
    handleClose(){
      // 子组件调用父组件方法,并传递参数
      this.$emit('changeShow','false')
    }
  },
  watch:{
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal,newVal){
      this.showDialog = this.addOrUpdateVisible
    },
  }
}
</script>

<style lang="less" scoped>

</style>

总结

到此这篇关于vue打开子组件弹窗都刷新功能的实现的文章就介绍到这了,更多相关vue打开子组件弹窗都刷新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
JS实现小米轮播图
Sep 21 #Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
You might like
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
几种响应式文字详解
2017/05/19 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
聚美优品的广告词
2014/03/14 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
团代会开幕词
2015/01/28 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
python中urllib包的网络请求教程
2022/04/19 Python