直接修改vnode的props的无法影响组件重新渲染？

来源：10-5 Modal组件编码

慕莱坞0998854

2021-05-20

老师你好，我在上一个提问中问了如何手动向slot里面传入内容的，根据老师的思路我改进了createModal函数，但是产生了新的疑问
先说下思路

	// Modal.vue
	<div class="modal" v-if="show">
		//...
	</div>

	{
		props:{
			show:{
				type:Boolean
			}
		}
	}

如上，Modal的显示与否是通过父组件传入的props的show来控制的，在modal关闭的时候会emit一个close事件通知父组件.这也是老师在视频中的写法

现在我想创建一个带标签的modal组件，我现在是这么写的：
图片描述

如上，通过直接创建vnode的方法，但是问题来了:

如何修改传入的props.show的值呢？我直接修改vn.props.show = false ,这样对Modal组件没有效果。由于执行了render(null,container),我猜想这样直接把外层的transition组件都移除了，页面上没有Modal了，但是也没有了transition的效果了。

那么按照红色箭头处所示，vn.component.props.show = false,这样却可以了。应该是modal的v-if 先判定为false，此时transition组件还在，所以有fade-out的效果。然后再render(null,container),这样就完美了

我搞不懂为什么修改vn.props.show没有效果，但是修改vn.component.props.show会触发组件重新渲染呢。

写回答

1回答