插槽
- 插槽就是用来优化模板内容的一个API，当你需要传入多个相同的内容，可以通过插槽的形式优化代码。
- 效果
- 代码：
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
<script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root">
<child>
<p>World</p>
<!--向子组件传递内容-->
</child>
</div>
<script>
Vue.component('child', {
// 父组件没传值就是该默认值
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
</html>
具名插槽
- 大多数情况下我们传入的都是多个
DOM元素，但是slot的内容默认就是父组件里所有的DOM元素，所以我们要给特定的slot取一个名字，相同的名字的DOM元素对应slot。这种方法就具名插槽。 - 效果
- 代码：
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
<script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root">
<contain>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</contain>
</div>
<script>
Vue.component('contain', {
<div class="content">content</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
39
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
<script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root">
<child>
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
<!--父组件通过props接收子组件的值，并且用用template规定用哪些DOM元素-->
</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>
