插槽
在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
<script>
Vue.component('child', {
props: ['content'],
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|
必须得包含一个 div 标签
content 内容比较多时，代码不容易阅读
使用插槽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<p>Dell</p>
</child>
</div>
<script>
Vue.component('child', {
props: ['content'],
template: `<div>
<p>hello</p>
<slot></slot>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<!-- <h1>Dell</h1> -->
</child>
</div>
<script>
Vue.component('child', {
props: ['content'],
template: `<div>
<p>hello</p>
<slot>默认内容</slot>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|
具名插槽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<body-content>
<div class='header' slot='header'>header</div>
<div class='footer' slot='footer'>footer</div>
</body-content>
</div>
<script>
Vue.component('body-content', {
props: ['content'],
template: `<div>
<slot name='header'></slot>
<div class='content'>content</div>
<slot name='footer'></slot>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<body-content>
<!-- <div class='header' slot='header'>header</div> -->
<div class='footer' slot='footer'>footer</div>
</body-content>
</div>
<script>
Vue.component('body-content', {
props: ['content'],
template: `<div>
<slot name='header'><h1>defalut header</h1></slot>
<div class='content'>content</div>
<slot name='footer'></slot>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|
作用域插槽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue中的插槽(slot)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<template slot-scope="props">
<h1>{{ props.item }} - hello</h1>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<slot
v-for="item of list"
:item=item
>
</slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
|