这篇文章主要介绍了Vue.js 作用域、slot用法（单个slot、具名slot）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
作用域
在介绍slot前，需要先知道一个概念：编译的作用域。比如父组件中有如下模板：
{{message}}
这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件的数据。
父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。
<div id="app"> </div>
这里的状态showChild绑定的是父组件的数据，如果想在子组件上绑定，那应该是：
<div id="app"> </div>
因此，slot分发的内容，作用域是在父组件上的。
slot用法
单个slot：
元素就可以为这个子组件开启一个 slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。
<title>单个slot</title> <div id="app"> <p>分发的内容</p><p>更多分发的内容</p></div>
元素，并且用一个
作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替代整个标签。
上面示例渲染后的结果为：
<div id="app"> <div> <p>分发的内容</p><p>更多分发的内容</p></div></div>
注意：子组件内的为备用内容，它的作用域是子组件本身。
具名slot：
给元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。
<div id="myApp"> <h2>标题</h2><p>正文内容</p><p>更多的正文内容</p><div>底部信息</div></div>
元素，其中在
内的 没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。
如果没有制定默认的匿名slot，父组件内多于的内容片断都将被抛弃。
渲染结果：
<div class="container"> <div class="header"> <h2>标题</h2></div><div class="main"> <p>正文内容</p><p>更多的正文内容</p></div><div class="footer"> <div>底部信息</div></div></div>
总结
如果你觉本文来源gaodai#ma#com搞@@代~&码*网/得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是详解Vue.js 作用域、slot用法（单个slot、具名slot）的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解Vue.js 作用域、slot用法（单个slot、具名slot）
转载请注明原文链接：详解Vue.js 作用域、slot用法（单个slot、具名slot）
