<!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>
<p slot="header">header 头部信息</p>
<p >对应中间未具名的</p>
<p >对应中间未具名的</p>
<p slot="footer">footer 底部信息</p>
</specific-assemly>
</div>
<script>
Vue.component('specific-assemly', {
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> ',
mounted:function(){
//通货$slots.header 访问slot中的数据对应 template中的 name="header"
var header=this.$slots.header
// VNode是一个虚拟节点
var text=header[0].elm.innerHTML
console.log(header)
console.log(text)
}
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
</html>
