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>

 

相关文章