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>

 

更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是生活随笔为你收集整理的vue组件-使用插槽分发内容(slot)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。