本文共 1431 字，大约阅读时间需要 4 分钟。

本来以为弹窗挺简单的，结果自己想多了。这几天的使用碰到了好多问题。

在组件中使用弹窗

   
	
    
     打开弹窗
    	
    
   

注意点：

1、父组件
   :visible.sync="open" 2、子组件props:{   //visible父组件传给子组件的值，控制是否显示弹窗	visible:{   		type:Boolean,		default:false	}}3、弹窗的关闭如果只是关闭弹窗没有其它操作就 this.$emit('update:visible',false) 如果有其它操作就按照子组件给父组件传参的方式
   this.$emit('change')change(){   	this.open = false	this.init()}

是不是固定写法不太清楚，公司很多前辈基本都这样

弹窗嵌套

今天碰见了个弹窗里套弹窗的操作，真让人头大

这个是官方的例子，重点是给外层弹窗加一个append-to-body 属性

新增与编辑操作共用一个弹窗

注意点：

1、弹窗的标题，要根据是新增还是编辑进行修改 2、先点击编辑操作，form表单数据正确。当点击新增时，form中应该没有任何数据，但是却显示之前编辑时的数据

实例

   
	
    
     新增
    	
    		 
     		   
      			 
       		   
      		   
      			 
       		   
      		 
     		 
     
      取消
     	
    	  
    	      
     	      
     		  
     			  
      		  
     	    
    
   

这样写是错误的，效果图如下

看起来是没问题的，实际上是有问题的。看下面这个图

• 第一个图没问题是先打开的新增，新增时初始状态是空的，所以重置后还是为空。
• 第二个图先打开的编辑，这时初始状态为张三的值，不是没有重置而实重置后还是张三。仔细观察可以看到关闭李四时，值重置成了张三

解决：

this.dialogT='编辑'this.$nextTick(()=>{   	this.form.name=row.name	this.form.age=row.age})

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

因为form表单初始值都是underfunded，所以在初始化完成后再赋值，初始值是underfunded。之前是因为打开弹窗时还没有初始化完成，这时赋值会替代原来的underfunded

查看详情

转载地址：http://iegh.baihongyu.com/