由于vue 2.6版本之后废弃了原本的slot用法,(虽说废弃,但还是可以用,不过3.0貌似已经不支持了),添加了v-slot用法,说是简便了之前复杂的操作,作为初学者一开始查文档看到时一脸懵逼,自己探索后发现其实也并不难,如果你也是初学者希望这篇文章对你有所帮助。
1.默认插槽,先上代码
子组件内容为
<template id="cpn">
<div>
<h3>hello slot</h3>
//定义一个插槽
<slot></slot>
</div>
</template>
父组件的内容为
<!-- 由于是默认插槽,所以v-slot可以写在子组件的标签上,而具名插槽和作用域插槽一般写在template标签上,:default此时可以省略 -->
<!--此处的cpn为我定义的子组件名-->
<cpn v-slot:default>
你好
</cpn>
<!-- 此时在浏览器显示出hello slot 和 你好 -->
由于上面的代码比较简单,就不过多解释,但是默认插槽也可以作为定义域插槽使用,定义域插槽使用后可以从子组件中获取数据到父组件,此处不过多赘述
子组件内容为
<template id="cpn">
<div>
<h3>hello</h3>
<!--此处的data可随意起名,pLanguage为子组件的data函数中return回来的一个数据-->
<slot :data="pLanguage"></slot>
</div>
</template>
父组件内容为
<!--此处虽然是做定义域插槽使用,但本质上是default用法,所以v-slot不用写在template中-->
<!--eat为自定义名称,可随意 :default依然可以省略-->
<cpn v-slot:default="eat">
{{eat.data}}
</cpn>
<!--此时浏览器会显示出hello slot 和 lPlanguage里面的数据-->
这样,就实现在父组件获取子组件数据内容了,需要注意的是,default最好在只有一个插槽时使用,如果有多个插槽个人不建议写成这种形式,会出现很多bug。
2.具名插槽
子组件内容
<template id="cpn">
<div>
<h3>hello</h3>
<slot name="bbq1"></slot>
<slot name="bbq2"></slot>
<slot name="bbq3"></slot>
</div>
</template>
父组件内容
<cpn>
<template v-slot:bbq1>
<h3>BBQ1</h3>
</template>
<template v-slot:bbq2>
<h3>BBQ2</h3>
</template>
<template v-slot:bbq3>
<h3>BBQ3</h3>
</template>
</cpn>
具名插槽使用了v-slot:代替了2.6之前的slot=的写法,还是比较好看出来的,跟default不同就是v-slot要写在template标签上,否则如果有多个插槽时,会没法控制特定插槽。
3.定义域插槽
子组件内容
<template id="cpn">
<div>
<h3>hello</h3>
<slot name="bbq" :data="pLanguage"></slot>
</div>
</template>
父组件内容
<cpn>
<template v-slot:bbq="eat">
<h3>{{eat.data}}</h3>
</template>
</cpn>
定义域插槽里(上面说过大概作用),首先子组件需要给一个自定义的name,然后给一个标识,上例给的是:data="pLanguage",此处的data可以自定义名称,pLanguage为数据内容,此处基本上与default的定义域用法没有多大差别。差别在v-slot:bbq="eat"这句,写在template标签上,否则多个插槽时会无法识别或出现各种错误,v-slot: 后面跟子组件中name的值,eat为自定义名称。v-slot简写用#实现,即用#代替v-slot:,冒号也需要去掉,也就是说,在v-slot=的情况下不能使用简写。
此篇文章到此结束,如果对你有帮助那就太好了。由于我的水平较低,出现的错误麻烦指正一下,谢谢。解构插槽props我目前正在研究,实在没怎么搞懂,搞懂后再补充。