Vue2-Slot插槽使用

Slot插槽

• 父组件向子组件传递
• 父组件将内容分发到子组件
• slot插槽的值只读，不能在子组件中修改
• slot插槽也可以作为组件之间的通信方式

默认插槽

父组件中：使用Son组件
    

子组件中：
    

具名插槽

#两种方式
`注意 v-slot：简写为 # 且 具名插槽需要用 template 包裹（组件不用 template 包裹）`
父组件中：使用Son组件  
  
//第二种写法 必须要加上template标签
        

子组件中：
        

作用域插槽

#数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(son组件在father组件中使用，但是数据来源是Son组件本身，这时就需要在Son组件中用作用域插槽将数据传输给插槽的使用者)
`父组件中：`
方法一：
	
		
	
方法二：
	//第二种写法
		
	

`子组件中：`
      
	            

应用场景示例

template中的插槽---具名插槽

#父组件中：father.vue
	#导入子组件
import Son from './son.vue'    
    

#子组件中 son.vue 使用父组件中的插槽

//渲染后就出现父组件的结构内容