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 相关文章推荐
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue mvvm数据响应实现
Nov 11 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
日本十大惊悚动漫
2020/03/04 日漫
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python KMeans聚类问题分析
2018/02/23 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
辞职申请书范本
2019/05/20 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
java代码实现空间切割
2022/01/18 Java/Android
Java实现给Word文件添加文字水印
2022/02/15 Java/Android