vue中slot插槽的用法
程序员文章站
2022-07-01 19:11:08
...
1.什么是插槽？
slot插槽：在模板中保留位置，使用的时候可以扩展
slot取name值
在占位符中 slot=“name值”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main{
background-color: #5187ff;
}
div{
margin-top:50px;
}
</style>
</head>
<body>
<div id="app">
<v-header>
<div slot="logo">
<img src="https://mat1.gtimg.com/www/mobi/2017/image/ui-icon_log.svg" alt="">
<a href="#">推荐频道</a>
</div>
</v-header>
<v-header>
<div slot="logo">
<img src="https://mat1.gtimg.com/www/mobi/2017/image/logo-text-whitetext_v2.svg" alt="">
</div>
</v-header>
</div>
<template id="header">
<main>
<slot name="logo"></slot>
<div>
<img src="https://mat1.gtimg.com/rain/bailing20/5454a2d663ae.icon_task_coin.svg" alt="">
签到
</div>
</main>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
components:{
'v-header':{
template:'#header'
}
}
})
</script>
</body>
</html>