vue给子组件增加html内容（称为插槽 slot）
Posted feiyangyao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue给子组件增加html内容（称为插槽 slot）相关的知识，希望对你有一定的参考价值。
插槽给子组件增加内容，插槽可以设置默认值
在子组件中template中插槽写法 <slot></slot>
slot标签内可以添加name属性，要与html中的slot值对应起来
（要是子组件html之间没有写内容，又想显示某个值，可以使用slot默认值：<slot>默认值</slot>）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <body-content> <div slot="header">header</div> <div slot="footer">footer</div> </body-content> </div> <script> Vue.component("bodyContent", template:`<div> <slot name=‘header‘></slot> <div>content</div> <slot name=‘footer‘></slot> </div>` ); var app = new Vue( el:‘#app‘ ) </script> </body> </html>
以上是关于vue给子组件增加html内容（称为插槽 slot）的主要内容，如果未能解决你的问题，请参考以下文章