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

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了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:

PS:狼蚁网站SEO优化看下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打开子组件弹窗都刷新内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板