为什么slot都是用在子组件

这次给大家带来为什么slot都是用在子组件,使用slot子组件的注意事项有哪些,下面就是实战案例,一起来看一下。

使用slot场景一:

子组件Minput.vue


 父组件 Minput 

可以显示吗

 这种情况下  Minput标签内的文字是不会渲染出来的

如果现在想在里面把文字渲染出来怎么办

好 用slot

子组件


 这样的话,父组件的里面的文字就可以渲染出来

场景二:具名插槽

子组件 he.vue

 父组件

    

hello world

  渲染出来的结果就是

hello world

场景三

子组件 child

这是h1

这是分发内容,只有在没有分发内容的情况下显示

父组件

    

这是一段p

SOPHP免费微信开源框架
SOPHP免费微信开源框架

SOPHP是一款稳定开源的微信公众平台开发系统,也是基于weiphp开发的第一款商业系统。依托自身强大的钩子功能,她可以帮助大家快速开发出自己想要的微信功能插件,运营近两年来我们收获了上千用户与良好的口碑。作为一个开源产品,希望大家都能参与进来为SOPHP添砖加瓦,SOPHP团队一直都在致力于让SOPHP更加优秀。

SOPHP免费微信开源框架 0
查看详情 SOPHP免费微信开源框架

两段p

渲染出来就是

这是h1

这是一段p

两段p

如果父组件


那么渲染出来的就是

这是h1

这是分发内容,只有在没有分发内容的情况下显示

场景四:作用域插槽

父组件

hello from parent {{ props.text }}

x渲染的话就是

hello from parent hello from child

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

怎样让按钮点击后出现“点”的边框

详解浏览器渲染流程

input的文本框怎么做到和img验证码

常用input文本框内容自动垂直居中并默认提示文字单击为空

以上就是为什么slot都是用在子组件的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545858.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:33:53
下一篇 2025年12月21日 17:34:24

相关推荐

发表回复

登录后才能评论
关注微信