这篇文章主要介绍了vue学习笔记之slot插槽用法,结合实例形式对比分析了vue使用slot插槽的相关操作技巧与注意事项,需要的朋友可以参考下
本文实例讲述了vue slot插槽用法。分享给大家供大家参考，具体如下：
不使用插槽，在template中用v-html解析父组件传来的带有标签的content
<div id="app"> <child content="<p>Rachel</p>"></div>
使用插槽，如果父组件为空，就会显示slot中定义的默认内容
<p>Rachel</p> Vue.component('child', { template: '<div> <p>hello</p>默认内容</div>' })
使用插槽添加header和footer，使用‘具名插槽’，也就是给插槽起个名字，各找各的位置。此处也可以写默认值，如果父组件没有对应的插槽内容的话，会显示子组件定义的插槽的默认值。
<div id="app"> <div class="header">header</div><div class="footer">footer</div></div> Vue.component('body-content', { template: '<div> default header<div class="content">content</div>default footer</div>' })
感兴趣的朋友可以使用本文来源gaodai$ma#com搞$$代**码网在线HTML/CSS/JavaScript代码运行工具：http://tools.gaodaima.com/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
以上就是vue学习笔记之slot插槽用法实例分析的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue学习笔记之slot插槽用法实例分析
转载请注明原文链接：vue学习笔记之slot插槽用法实例分析
