企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持私有化部署方案 广告
~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue插槽(slot)</title> <script src="vue.js"></script> </head> <body> <div id="root"> <!-- <child content="<h1>Jack</h1>">--> <!-- <p>goods</p>--> <!-- </child>--> <child> <!-- <h1>Jack</h1>--> <div class="header" slot="header">header</div> <div class="footer" slot="footer">footer</div> </child> </div> <script> Vue.component('child', { props:['content'], // template:'<div><p>Hello World</p></div>', template: ` <div> <slot name="header">这是默认值</slot> <slot name="header1">这是默认值1</slot> <p>Hello</p> <!-- <div>{{content}}</div>--> <!-- <template v-html="this.content">这样不行</template>--> <!-- <div v-html="this.content"></div>--> <!-- <slot><h1>slot中可以插入默认内容</h1></slot>--> <slot name="footer"></slot> </div>`, }); var vm = new Vue({ el: '#root', }); </script> </body> </html> ~~~