slot用法
- 单个slot
<div id="app">
<child-component>
<p>分发的内容</p>
<p>更多分发的内容</p>
</child-component>
</div>
<script>
Vue.component('child-component', {
template: '<div><slot><p>如果父组件没有插入内容，我将作为默认出现</p></slot></div>'
})
</script>
- 具名slot
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多的正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script>
Vue.component('child-component', {
template: '\
<div class="container"> \
<div class="header"> \
<slot name="header"></slot> \
</div> \
<div class="main"> \
<slot></slot> \
</div> \
<div class="footer"> \
<slot name="footer"></slot> \
</div> \
</div>'
})
</script>
- 作用域插槽
父组件中使用了<template>元素，而且拥有一个scope="props"的特性，这里的props只是一个临时变量，就像v-for="item in items"里面的item一样。template内可以通过临时变量props访问来自子组件插槽的数据msg。
<div id="app">
<ping>
<template scope="props">
<p>来自父组件的内容</p>
<p>{{ props.msg }}</p>
</template>
</ping>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('ping', {
template: '<div><slot msg="这是子组件的内容"></slot></div>',
})
var app = new Vue({
el: '#app',
})
</script>
