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

2024-09-28 16:23:32

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：下面看下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打开子组件弹窗都刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue父组件向子组件传值以及data和props的区别详解

1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro
Vue父组件如何获取子组件中的变量

在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字就可以操作子组件的元素,以
vue中父子组件传值,解决钩子函数mounted只运行一次的操作

因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组
vue 路由子组件created和mounted不起作用的解决方法

判断项目是否启用keep-alive 启用使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-view> </keep-alive> 使用v-if判断(成功解决) <keep-alive v-if="!$route.meta.noKeepAlive"> <ro
解决vue 子组件修改父组件传来的props值报错问题

vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&
Vue 使用Props属性实现父子组件的动态传值详解

如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo
vue打开子组件弹窗都刷新功能的实现

vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog
vue动态子组件的两种实现方式

文章目录方式一:局部注册所需组件使用缓存方式二:动态注册组件实现让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <div id="example"> <button @click="change">切换页面</button> <component :is="curre
vue通过子组件修改父组件prop的多种实现方式

目录前言常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4.通过计算属性computed实现修改prop 前言实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景,下面我总结一下目前工作中遇到和用过的一些方式,也算是给大家一个实现方式和思路参考,如有理解不对or有其他方法欢迎在评论区留言指导- 常用方式推荐,遵循prop单向传
Vue/React子组件实例暴露方法(TypeScript)

目录 Vue2 Vue3 React 最近几个月都在用TS开发各种项目,框架有涉及到Vue3,React18等:记录一下Vue/React组件暴露出变量/函数的方法的写法: Vue2 回顾一下Vue2 组件暴露出去方法,它并没有约束,写在methods里的方法都能被调用,data里的变量也能被接收: 现拉一个vue 2.6.10的模板下来子组件的数据父组件获取子组件实例,调用子组件方法等: 控制台输出: 这个输出的子组件实例里包含所有的变量和方法: Vue3 组件通过vue3提供的define
解决vue 引入子组件报错的问题

错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de
Vue.js子组件向父组件通信的方法实例代码详解

一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文
vue.js 子组件无法获取父组件store值的解决方式

子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变修改为父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s
spring cloud config和bus组件实现自动刷新功能

1.启动RabbitMQ 2.修改config服务端依赖:(boot和cloud版本不要太高,不然刷新配置的请求不能用) <dependencies>  <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-consul-discovery</artifactId> &
详解vue引入子组件方法

前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

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

相关推荐

随机推荐