slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。
一、单个组件
如果子组件的模板不包含 slot,那么父组件的内容就会被抛弃
父组件内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
子组件内容
1 2 3 4 5 |
|
浏览器显示
因为子组件没有<slot>
元素,所以父组件的内容被抛弃,现在我们在子组件加上<slot>
元素
1 2 3 4 5 6 |
|
此时浏览器显示
此时,父组件的内容就显示在了子组件的内容里了。
二、具名slot
上面案例中讲解的是当组件的模板中有一个slot的方法,那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。
父组件内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
子组件内容
1 2 3 4 5 6 7 8 |
|
浏览器显示
分析:子组件中的slot有name属性,与父组件的slot的值相对应,那么就会匹配到,若子组件中slot有name属性,但父组件没有与之相对的slot的值,则会被抛弃掉。父组件没有slot值的内容则会显示在默认的slot中。如果子组件中没有默认的slot,父组件没有slot值的内容就会被抛弃。