Vue:slot用法(向子组件添加一个 slot (插槽))
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <child-component> <p>分发的内容</p> <p>更多分发的内容</p> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: '\ <div>\ <slot>\ <p>如果父组件没用插入内容,我将作为默认出现</p>\ </slot>\ </div>' }); var app = new Vue({ el: '#app' }) </script> </body> </html>
//插入多个solt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component', {
template: '\
<div class="component">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>