请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

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

老师你好,我在上一个提问中问了如何手动向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回答

同学你好 特别好的发散 已经比较深刻了 我们继续说,这个 vnode 的实例,是集大成者,在上面可以包含组件实例。

打印vn出来能看到

https://img1.sycdn.imooc.com//szimg/60a5c8e7090ca04a17960894.jpg

这个 props 是只读的,修改没用的。

这个 component 就是内部组件实例,你可以在另外一个组件中,setup 中调用const test= getCurrentInstance() (一个 vue 的内部方法,返回组件实例),然后打印一下,你会发现两者是一样的。

在这个组件实例上,你可以发现两个神奇的属性

https://img1.sycdn.imooc.com//szimg/60a5c95d0976e3df20620810.jpg

上面的 props 可以拿到组件实例的所有属性,可以通过 proxy 拿到组件实例的所有属性和方法(可以对比一下组件 setup 中的内容)

想修改任何属性,可以修改 props

想修改任何属性或者调用方法可以修改 proxy 或者调用。

可以参考 element-plus 的实现

https://github.com/element-plus/element-plus/blob/dev/packages/message/src/message.ts#L81

https://github.com/element-plus/element-plus/blob/dev/packages/message/src/message.ts#L108

0 回复 有任何疑惑可以回复我~
  • 提问者 慕莱坞0998854 #1
    谢谢老师,我后来想了一下,
    干脆在Modal.vue里新建了一个const showRef = ref(props.show), 然后modal的显示与否由这个内部的showRef来控制(v-if=showRef),
    这样父组件就不需要关心自己是否需要改变传入show的值了。
    回复 有任何疑惑可以回复我~ 2021-05-20 15:23:43
  • 提问者 慕莱坞0998854 #2
    非常感谢!
    回复 有任何疑惑可以回复我~ 2021-05-20 15:30:04
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信