slot插槽:在模板中保留位置,使用的时候可以根据具体情况扩展
通过slot插槽向组件内部指定位置传递内容,也可以通过slot可以父子传参
slot标签需要取name值,占位符需要取slot值,这两个值保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<v-header>
<h2 slot="title">推荐</h2>
</v-header>
<v-header>
<h2 slot="title">首页</h2>
</v-header>
<v-header>
<h2 slot="title">推荐</h2>
</v-header>
</div>
<template id="header">
<main>
<h1>logo</h1>
<slot name="title"></slot>
<p>
签到
三
</p>
<hr>
</main>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
components:{
'v-header':{
template:'#header'
}
}
})
</script>
</body>
</html>
另外需注意的是
<v-header>
<h2 slot="title1">推荐</h2>
</v-header>
或者
<v-header>
<h2>推荐</h2>
</v-header>
是不显示内容的