<div id='root'> <child content = '<p>Dell</p>'></child> </div> <script> Vue.component('child',{ props:['content'], template:` <div> <p>hello</p> <div v-html='this.content'></div> </div> ` }) var vm = new Vue({ el:'#root' }) </script>
<div id='root'> <child> <h1>dell</h1> </child> </div> <script> Vue.component('child',{ template:` <div> <p>hello</p> <slot></slot> </div> ` }) var vm = new Vue({ el:'#root' }) </script>
像这样,父组件里面直接写dom元素,通过slot引用,在子组件插入点内容,叫做插槽
Vue.component('child',{ template:` <div> <p>hello</p> <slot>默认内容</slot> </div> ` })
<div id='root'> <body-content> <div class="header">header</div> <div class="footer">footer</div> </body-content> </div> <script> Vue.component('body-content',{ template:` <div> <slot></slot> <div>content</div> <slot></slot> </div> ` }) var vm = new Vue({ el:'#root' }) </script>
<div id='root'> <body-content> <div class="header" slot='header'>header</div> <div class="footer" slot='footer'>footer</div> </body-content> </div> <script> Vue.component('body-content',{ template:` <div> <slot name='header'></slot> <div>content</div> <slot name='footer'></slot> </div> ` }) var vm = new Vue({ el:'#root' }) </script>