这次给大家带来为什么slot都是用在子组件,使用slot子组件的注意事项有哪些,下面就是实战案例,一起来看一下。
使用slot场景一:
子组件Minput.vue
父组件 Minput
可以显示吗
这种情况下 Minput标签内的文字是不会渲染出来的
如果现在想在里面把文字渲染出来怎么办
好 用slot
子组件
这样的话,父组件的里面的文字就可以渲染出来
场景二:具名插槽
子组件 he.vue
父组件
hello world
渲染出来的结果就是
hello world
场景三
子组件 child
这是h1
这是分发内容,只有在没有分发内容的情况下显示
父组件
这是一段p
SOPHP免费微信开源框架查看详情SOPHP是一款稳定开源的微信公众平台开发系统,也是基于weiphp开发的第一款商业系统。依托自身强大的钩子功能,她可以帮助大家快速开发出自己想要的微信功能插件,运营近两年来我们收获了上千用户与良好的口碑。作为一个开源产品,希望大家都能参与进来为SOPHP添砖加瓦,SOPHP团队一直都在致力于让SOPHP更加优秀。
0
![]()
两段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
微信扫一扫
支付宝扫一扫