<vue 组件 4、插槽的使用>


代码结构

 

 

一、     01-slot-插槽的基本使用

1、 效果  

同样的一个插槽,父组件调用的时候不同展现的内容就不同

 

 

2、代码

01-slot-插槽的基本使用.html

 



	
		
		Title
	
	

		

		
哈哈哈 呵呵呵
我是div元素

我是p元素

 

二、     02-slot-具名插槽的使用

1、 效果

给插槽起名字,父组件调用的时候指定替换哪个插槽的内容

 

 

2、代码

02-slot-具名插槽的使用.html



	
		
		Title
	
	

		
------------------------ 标题 ----------------------------

三、     03-slot-绑定数据及展现方式

1、效果

给插槽绑定数据,调用的时候还可以指定数据的不同展现形式

 

 

2、代码

03-slot-绑定数据及展现方式.html

 



	
		
		Title
	
	

		
------------------------------------- -------------------------------------
vue