单个插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<sing-leassemly>
<p>插入内容 父组件内容<p>
</sing-leassemly>
</div>
<script>
Vue.component('sing-leassemly',{
//只要有slot DOM中插入的内容就会显示
template:'<div>\
<slot>\
默认内容 如果未插入内容 此条内容作为默认显示\
</slot>\
</div>'
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
</html>
具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<specific-assemly>
<!-- 此处slot 对应组件中 name="header" -->
<p slot="header">header 头部信息</p>
<p >对应中间未具名的</p>
<p >对应中间未具名的</p>
<p slot="footer">footer 底部信息</p>
</specific-assemly>
</div>
<script>
Vue.component('specific-assemly', {
// 对应DOM中 slot="name"
// <div class="header">
// <slot name="header">\
// </slot>\
// </div>\
template: '<div>\
<div class="header">\
<slot name="header">\
</slot>\
</div>\
<div class="center">\
<slot>\
</slot>\
</div>\
<div class="footer">\
<slot name="footer">\
</slot>\
</div> \
</div> '
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
</html>
