插槽
01 简单用法
定义 组件时
在组件 template 属性中 加 <slot></slot> 占位 （vue系统组件）
在使用组件时，组件（自定义标签）的内容 会自动灌入到slot的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<home></home>
<hr>
<news></news>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let ComTitle = {
//假设模板只有h2标签是可以共用的，其他页面结构样式需要父组件自己定义，这里用插槽站位
template:`
<div>
<h2>我是子组件共同的标题</h2>
**下面的内容在不同组件里可以自定义**
<slot></solt>
</div>
`
}
let Home = {
template:`
<div>
home页
<com-title>
<h5>插槽对应的自定义结构内容</h5>
</com-title>
</div>
`,
components:{
ComTitle
}
}
let News = {
template:`
<div>
new页
<com-title>
<button>自定义按钮</button>
</com-title>
</div>
`,
components:{
ComTitle
}
}
let vm = new Vue({
el: "#app",
components: {
Home,
News
}
})
</script>
</html>
02 具名插槽
插槽可以命名，在 使用组件时 组件中的内容，可以有针对的灌入不同的命名插槽中
<!-- template标签里使用具名slot v-slot:XXX 或者简写 #XXX -->
<body>
<div id="app">
<cpn>
<template #header>
<h2>HHHH</h2>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h2>title</h2>
<slot name="header"></slot>
</div>
</template>
</body>
<script>
let cpn = {
//假设模板只有h2标签是可以共用的，其他页面结构样式需要父组件自己定义，这里用插槽站位
template: "#cpn"
}
let vm = new Vue({
el: "#app",
components: {
cpn
}
})
</script>
