美文网首页
2018-08-14更改模态框严重bug

2018-08-14更改模态框严重bug

作者: 国之大殇 | 来源:发表于2018-08-21 16:58 被阅读0次

模态框出现bug,只怪太相信自己,在最不应该出问题的地方出现了问题。

bug:模态框关闭时,没有做好双向绑定。

解决方案:类似于ngModel的做法。父子和子父组件通信结合。

此组件时自定义组件,想了差不多一个上午,经历了一上午才解决。首先,父组件要传递给子组件属性值,这个用属性绑定就可。代码如图:

实际传入的时opened属性,父组件中只需要定义一个变量来传递值即可。

而从子组件向父组件传递值的时候,需要怎么办呢?肯定用到了@Output监听事件的功能。这个功能就可以改变父组件中相应的变量。代码如图:

可以看到,openedChange方法就是对应的监听事件。在这个事件里面,当点击按钮时,实质是先让opened变为false,然后由子组件emit给父组件的属性,这样以来,双向绑定完毕。

有坑请看:此处最后的自定义组件是这样的:

可以看到,opened是进行了双向绑定,一定要记住,emit的事件名称一定是属性名+Change,不然无效!

相关文章

  • 2018-08-14更改模态框严重bug

    模态框出现bug,只怪太相信自己,在最不应该出问题的地方出现了问题。 bug:模态框关闭时,没有做好双向绑定。 解...

  • 第十三节 MFC的一些概念

    一、模态对话框和非模态对话框Windows对话框分为两类:模态对话框和非模态对话框。模态对话框是这样的对话框,当它...

  • element-ui dialog组件嵌套bug

    模态框嵌套模态框 只需在子集的模态框里面添加append-to-body 就可以了 父级模框 子集模态框 我这样嵌...

  • 进阶任务10-事件应用

    实现Tab切换的功能 实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • bootstrap模态框多层嵌套,背景滚动

    问题:在弹出模态框A的基础上,弹出模态框B,关闭模态框B之后,模态框A不能滚动(由于A模块框内容) 造成的原因:遮...

  • 事件的应用

    1. 实现如下图Tab切换的功能 2. 实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 进阶任务10

    1.实现如下图Tab切换的功能 2.实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 事件的应用

    1.实现如下图Tab切换的功能: 2.实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 小程序自定义模态框model

    自定义模态框,点击左侧模态框可以关闭显示

  • 金蝶云苍穹动态表单插件loadCustomControlMeta

    新建对话模态框动态表单 向其内容区添加Flex面板(更改标识为myfieldcontainer)和单据体后保存 新...

网友评论

      本文标题:2018-08-14更改模态框严重bug

      本文链接:https://www.haomeiwen.com/subject/xsxvbftx.html