Vue——07插槽slot

目录

slot

slot——具名插槽         

编译的作用域

---

之前写的代码都是创建一个子组件然后用父组件进行绑定并获取

看段代码：

	
		
		
		
	
	
		

			
			显示span
		
		
		
	

 

 效果如下：

这里想要直接获取cpn中的span元素。但是这样并没有达到我们所期望的效果，如果想要实现这种效果就要用到插槽

slot

 插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，使模块进行复用

应修改为：

	
	用slot插槽显示

如下图： 

 

slot——具名插槽         

在子组件内使用特殊的元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容.

如果用上一种方法来用slot标签获取对应的多个span标签是行不通的

比如：

OCTYPE html>

	
		
		
		
	
	
		

			
				左插槽
				中间插槽
				右插槽
			
		
		
		
	

这里每一个slot都渲染了三遍span，每个slot对应每个span就要在slot中加入name值来实现绑定

而对应的span中也要去对应的写上slot值

一共有三种写法

第一种：

	

			
				左插槽
				中间插槽
				右插槽
			
		
		

 第二种：

第三种：

 实现效果：

 推荐使用二三两种方法

编译的作用域

组件与组件之间是存在作用域的

看下面这个例子：

没在子组件中设置isShow的值时： 

 

把isShow值设置为false时效果如下： 

 下面是一个作用域插槽案例：

效果如下：

 案例二：

	
		
		
		
	
	
		

			
				{
    {ww.user2}}