vue.js 中什么是插槽? 有什么用?
插槽就是子组件中的提供给父组件使用的一个占位符, 用 < slot></slot> 表示, 父组件可以在这个占位符中填充任何模板代码, 如 html, 组件等, 填充的内容会替换子组件的 < slot></slot > 标签.
插槽用于决定将所携带的内容, 插入到指定的某个位置, 从而使模板分块, 具有模块化的特质和更大的重用性. 插槽显不显示, 怎样显示是由父组件来控制的, 而插槽在哪里显示就由子组件来进行控制.
如下代码:
1, 在子组件中放一个占位符
2, 在父组件中给这个占位符填充内容:
3, 展示的效果
现在来看看, 如果子组件中没有放插槽, 同样的父组件中在子组件中填充内容, 会是啥样的:
1, 子组件代码无插槽:
2, 父组件照常填充内容:
3, 展示的效果:
总结: 如果子组件没有使用插槽, 父组件如果需要往子组件中填充模板或者 HTML, 是没法做到的
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/16369.html