0
点赞
收藏
分享

微信扫一扫

关于vue的插槽(slot)的学习笔记

史值拥 2022-01-31 阅读 58


看了vue官方的文档,关于slot的介绍显得很模糊。没看懂........ 于是并自己查了一些资料,自己学了一下。现在跟大家分享一下。  

Vue.component('test', { 
template: '<a>blank <slot>my name is test</slot> blank </a>'
}

这里注册一个名叫test的组件。内设一个<slot>my name is test</slot>的插槽。先别着急什么意思,先看HTML代码

<test></test>

一个组件标签。 这样编译一下。

显示的内容为

blank my name is test  blank

这里没有任何对插槽的操作。很显然插槽跟占位符有点像,继续往下看,你就知道我为什么这么说了

接下来

<test><span>my name is span</span></test>

显示的内容为

blank my name is span  blank.

这里span代替了插槽。 这就是为什么说插槽跟占位符有点像的原因了

以上写的内容 只针对于只有一个插槽,  下文将描述多插槽的操作

Vue.component('test2', {          
template: '<a>blank <slot name="test">my name is test</slot> <slot name="test1">my name is test1</slot> blank </a>'
}

html代码

<test2></test2>


编译结果

blank my name is test   my name is test1 blank

接下来

修改HTML代码

<test2>

<span slot="test">my name is span</span>

<span slot="test1">my name is span1</span>

<test2>

编译结果为

blank my name is span  my name is span1  blank 

这里 slot 为test的span代替了name=test的slot. slot为test1的span代替了name=test1的slot

看到这里,大家应该都明白了吧!!^_^


举报

相关推荐

0 条评论