解决父组件将子组件作为弹窗调用只执行一次created的问题


Posted in Javascript onJuly 24, 2020

1、问题原因

因为第一调用渲染子组件后,不再对子组件的created进行调用

2、解决方法

用v-if将子组件包裹起来,因为v-if=false时可以将子组件销毁掉,再次调用时重新渲染

3、上图

解决父组件将子组件作为弹窗调用只执行一次created的问题

解决父组件将子组件作为弹窗调用只执行一次created的问题

初始默认dialogVisible1=false,当执行打开窗口的操作时dialogVisible1为true,当关闭窗口时dialogVisible1=false,从而每一次进入弹窗都会重新渲染整个子组件。

补充知识:vue如何每次打开子组件弹窗都进行初始化

:visible.sync 与 v-if同时使用即可。

解决父组件将子组件作为弹窗调用只执行一次created的问题

以上这篇解决父组件将子组件作为弹窗调用只执行一次created的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
You might like
php str_pad 函数使用详解
2009/01/13 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
详解python中list的使用
2019/03/15 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
十八大报告观后感
2014/01/28 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
python 逐步回归算法
2021/04/06 Python
python开发飞机大战游戏
2021/07/15 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers