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

  • Z时代
  • 2024-03-13
  • 分类：IT

题目描述

在孙组件GrandSon里有一个slot标签：<slot name="my-slot">默认内容</slot>；将他引入子组件Son后，Son里这样写：

<GrandSon>
   <slot name="my-slot" slot="my-slot"></slot>
 </GrandSon>；

（我知道这是已废弃的语法）按照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替换掉；难道插槽的替换顺序是由外向内的吗？

题目来源及自己的思路

相关代码

https://codesandbox.io/s/nostalgic-water-gjv2kl?file=/src/com...

你期待的结果是什么？实际看到的错误信息又是什么？

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

回答：

第一个问题是没有内容，由内容就会替换，第二个问题，插槽的替换顺是由外到内

以上是 在slot标签上添加slot属性的一些疑问，以及插槽的替换顺序是怎样的？ 的全部内容， 来源链接： utcz.com/p/934777.html

回到顶部