vue组件-使用插槽分发内容(slot)
Posted ccyinghua
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件-使用插槽分发内容(slot)相关的知识,希望对你有一定的参考价值。
slot--使用插槽分发内容(位置、槽口;作用: 占个位置)
官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容
使用组件时,有时子组件不知道会收到什么内容,这是由父组件决定的。
一、单个插槽
1.my-component 组件: <div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div> 2.父组件: <div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div> 3.渲染结果: <div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div>
二、具名插槽
slot根据不同的name名称分发内容,多个插槽可以有不同的名字。
仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
1.my-component 组件: <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> 2.父组件: <my-component> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </my-component> 3.渲染结果: <div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>
三、作用域插槽
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
1.子组件: <div class="child"> <slot text="hello from child"></slot> </div> 2.父组件: <div class="parent"> <child> <template slot-scope="props"> <span>hello from parent</span> <span>{{ props.text }}</span> </template> </child> </div> 3.渲染结果: <div class="parent"> <div class="child"> <span>hello from parent</span> <span>hello from child</span> </div> </div>
以上是关于vue组件-使用插槽分发内容(slot)的主要内容,如果未能解决你的问题,请参考以下文章