vue插槽

发布时间:2022-06-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue插槽脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 ,vue插槽一般有以下几种使用方式 ,分别是 具名插槽和默认插槽 ,以及作用域插槽

为什么使用插槽

1.首先要明白插槽是使用在子组件中的

vue插槽

 

 

2、插槽是为了将父组件中的子组件模板数据正常显示

 

具名插槽的使用

 

 

具名插槽其实就是给插槽取个名字。

 

毕竟默认插槽只能显示一个 ,但是一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中这就是具名插槽

默认插槽的使用

 

默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父组件将会把 未指定名字的插槽填充的内容填充到默认插槽中。

作用域插槽的用法

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用

父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

vue插槽

 

vue插槽

 

效果:

vue插槽

 

 

 

 

 

 

 

脚本宝典总结

以上是脚本宝典为你收集整理的vue插槽全部内容,希望文章能够帮你解决vue插槽所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: