老师你好,我在上一个提问中问了如何手动向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会触发组件重新渲染呢。