在slot标签上添加slot属性的一些疑问,以及插槽的替换顺序是怎样的?
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