var MyCmp = { template: '<div style="padding: 10px; border: 1px solid red; background: white;">\ <slot name="title"></slot>\ <slot></slot>\ <slot name="footer"></slot>\ </div>' }; new Vue({ el: '#app', components: { myCmp: MyCmp }, data: { string: 'A string from slot' } });
<script src='https://unpkg.com/vue@2.4.4/dist/vue.js'></script> <div id='app'> <my-cmp> <h3 slot='title'>{{string}}</h3> <div>some content</div> <h3 slot='footer'>footer</h3> </my-cmp> </div>