Subscribe on changes!

在slot标签上添加slot属性的一些疑问,以及插槽的替换顺序是怎样的?

avatar
Aug 15th 2023

Vue version

2.7

Link to minimal reproduction

https://codesandbox.io/s/nostalgic-water-gjv2kl?file=/src/components/Son.vue

Steps to reproduce

在孙组件GrandSon里有一个slot标签:<slot name="my-slot">默认内容</slot>;将他引入子组件Son后,Son里这样写: <GrandSon> <slot name="my-slot" slot="my-slot"></slot> </GrandSon> (我知道这是已废弃的语法,即使换成vue3的新语法问题也存在)按照vue官网对插槽的解释来说, 这个空的slot标签:<slot name="my-slot" slot="my-slot"></slot>,不是应该会把GrandSon里的slot标签替换掉吗,但是运行之后发现,并没有替换掉,我试了之后发现如果Son里面的slot不是空标签的话是可以替换掉的,这是为什么,这跟vue官网的解释好像不太一样?

还有如果再定义一个Son组件的父组件叫App组件,把Son引入App后,App里这样写:<Son><div slot="my-slot"></div></Son> 运行后发现,这里的div标签最终会把GrandSon里的slot替换掉;按我自己的想法是,div先把Son组件里的空slot替换掉,然后继续把GrandSon里的slot替换掉;难道插槽的替换顺序是由外向内的吗?

What is expected?

希望了解这个现象的原因以及了解插槽的替换顺序

What is actually happening?

插槽的替换跟官网描述的好像不太一样

System Info

No response

Any additional comments?

No response