什么是插槽?
插槽 (Slot) 是 vue 提出来的一个概念, 正如名字一样, 插槽用于决定将所携带的内容, 插入到指定的某个位置, 从而使模板分块, 具有模块化的特质和更大的重用性. 插槽显不显示, 怎样显示是由父组件来控制的, 而插槽在哪里显示就由子组件来进行控制
关键字: slot
元素作为承载分发内容的出口, 相当于一个占位符, 将父组件中想要展示的内容在子组件中使用进行占位. 若一个组件中没有包含元素, 则该组件起始标签和结束标签之间的任何内容都会被抛弃.
Vue slot 原理
在 web-components 中有 slot 的概念, https://developers.google.com/web/fundamentals/web-components/shadowdom.
<slot> 元素
Shadow DOM 使用 <slot> 元素将不同的 DOM 树组合在一起. Slot 是组件内部的占位符, 用户可以使用自己的标记来填充.
通过定义一个或多个 slot, 您可将外部标记引入到组件的 shadow DOM 中进行渲染. 这相当于您在说 "在此处渲染用户的标记".
注: Slot 是为网络组件创建 "声明性 API" 的一种方法. 它们混入到用户的 DOM 中, 帮助对整个组件进行渲染, 从而将不同的 DOM 树组合在一起.
更多 vue.js 相关知识, 可访问 Vue.JS 答疑 https://www.html.cn/qa/vue-js/ 栏目!!
来源: http://www.css88.com/qa/vue-js/15526.html