Vue.js slot-插槽

2021/4/23 Vue

# 组件的插槽

是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么。

# 基本使用


<template id="myCpn">
		<div>
			<h2>这是子组件</h2>
			<slot></slot>
			<h2>这是子组件</h2>
		</div>
	</template>

<div id="app">
		<cpn><h1>插槽测试</h1></cpn>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 实例


<div id="app">
		<cpn><h1>插槽测试标题</h1></cpn>
		<cpn><p>插槽测试文字</p></cpn>
		<cpn><input type="" name="" id="" value="" placeholder="插槽测试输入框" /></cpn>
	</div>

		
	<template id="myCpn">
		<div>
			<h2>这是子组件</h2>
			<slot></slot>
			<button type="button">查看</button>
		</div>
	</template>
		
			<script src="vue.js"></script>
			<script type="text/javascript">
				const cpn = Vue.extend({
								template:'#myCpn',
							})
							
	
				const app = new Vue({
								el: '#app',
								data: {
									name:'Retr0'
								},
								components:{
									cpn
								},		
							})
							
		</script>

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

# 具名插槽

  • Props

    • name - string,用于命名插槽。
  • Usage

    元素作为组件模板之中的内容分发插槽。 元素自身将被替换。

    详细用法,请参考下面教程的链接。

  • 参考通过插槽分发内容 (opens new window)

# slot='val'

<div id='box'>
    <child>
        <div slot='b'>标题</div> 
				<!-- 将name为b的插槽内容替换 -->
    </child>
</div>
1
2
3
4
5
6
Vue.component("child",{
    template:`
		<div>
			<slot name='a'></slot>
			<slot name='b'></slot> //该插槽会被替换
			<slot name='c'></slot>
		</div>
	`,
})
1
2
3
4
5
6
7
8
9

# v-slot

<div id='box'>
    <template v-slot:b><div slot='b'>标题</div> </template>
						<!-- 将name为b的插槽内容替换 -->
</div>
1
2
3
4
Vue.component("child",{
    template:`
		<div>
			<slot name='a'></slot>
			<slot name='b'></slot> //该插槽会被替换
			<slot name='c'></slot>
		</div>
	`,
})
1
2
3
4
5
6
7
8
9

# 作用域插槽

父组件替换插槽的标签,但是内容由子组件提供。


	<div id="app">
		
		<cpn></cpn>
	
		<cpn>
			<template slot-scope = "cpn2"> 
				<!-- 通过slot-scope 获取子组件中的数据 -->
				<span>{{cpn2.data.join(' ')}}</span>
			</template>
		</cpn>

	</div>

		
<template id="myCpn">
<div>
<slot :data = "PLanguages"> 
	<ul>
		<li v-for="item in PLanguages">
			{{item}}
		</li>
  </ul>
</slot>
</div>
</template>

<script src="vue.js"></script>
<script type="text/javascript">
const cpn = Vue.extend({
				template:'#myCpn',
				data(){
					return{
						PLanguages:['Java','Python','C#','JavaScript']
					}
				}
			})
			

const app = new Vue({
				el: '#app',
				data: {
					name:'Retr0'
				},
				components:{
					cpn
				},		
			})
			
</script>

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
40
41
42
43
44
45
46
47
48
49
50
51

# slot抽屉效果

<div id='box'>
    <child>
    	 <button @click='isshow=!isshow'>显示/隐藏</button>
    </child>
    <slidebar v-show='isshow'></slidebar>
</div>
1
2
3
4
5
6
Vue.component('child',{
    template:`
		<div>
			<slot></slot>
		</div>
	`
})
Vue.component('slidebar',{
    template:`
		<ul>
			....
		</ul>
	`
})
new Vue({
	el:'@#box',
    data:{
        isshow:false
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Last Updated: 2021/12/19上午12:27:30