iView的Modal填坑之旅

月想容

于 2018-03-16 18:02:33 发布

阅读量3.7w

点赞数 2

分类专栏：前端文章标签： Modal iView render

本文链接：https://blog.youkuaiyun.com/u014418725/article/details/79584459

版权

本文记录了在使用iView的Modal组件时遇到的问题及解决方案。原本将Modal和参数放入子组件导致父组件无法有效控制，通过调整Modal至父组件并利用props传递数据解决了此问题。在查看功能的实现中，由于Modal关闭后未清除旧数据，通过在子组件中增加:key来确保每次展示新的数据。整个过程暴露出对Vue.js渲染过程理解不足的问题，强调了动态绑定和组件生命周期的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象和需求描述：

有个表格，需要添加登记和查看功能，准备用一个modal（模态框）来实现。在设计过程中，希望能够实现最大的模块化和重用性。故一开始，设计了一个将iView的Modal和内部参数全部放入一个vue components组件中：

子组件：

<template>
    <Modal
        :value="modalStatus"
        :title="dengji"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
	</Modal>
</templa

最低0.47元/天解锁文章