vue中 具名slot的用法

时间:2023-01-30 19:40:45

知道了单个slot插口的用法,具名slot也是很好理解的,
具名slot:就是给每一个slot取一个名字,给插值设置一个slot属性,当插值的slot属性和slot名字相同时,就在给位子插值。若不取名字,则是默认插值的位子。
看下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名slot</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child>
<h3 slot="header">我是插入的标题</h3>
<!--此处写slot=“”,下面写的是name=“”-->
<div>
<p>我是 默认的插值</p>
<p>我是 默认的插值</p>
</div>
<!--没有命名的插值,会插入到没有name属性的slot中。-->
<h1 slot="footer">我是插入的页脚 </h1>
<!--此处写的顺序和组件中是不对应的,说明先后顺序不影响-->
</child>
</div>
<script>
Vue.component('child',{
template:'<div> ' +
'<header><slot name="header"><h1>我是slot标题</h1></slot></header>' +
'<main><slot>我是slot主要内容</slot></main>' +
'<footer><slot name="footer"><h3>我是slot页脚标题</h3></slot></footer>' +
'</div>'
})
new Vue({
el:'#app'
})
</script>
</body>
</html>