Vue中插槽的简单使用

插槽

• 分类：默认插槽、具名插槽、作用域插槽

• 默认插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件（App）===>子组件(MyFooter)

• 默认插槽的App组件

• 
  
  
  ​

• 默认插槽的MyFooter组件

• 
  ​
  
  
  ​

• 具名插槽的App

• 具名插槽的给MyFooter的slot标上名字name="xxx"，在App组件中使用那个插槽则slot="xxx"。进行相互匹配

• 具名插槽的MyFooter

• 
  ​
  
  ​
  

• 作用域插槽理解：

  1、和上面两种插槽不同，作用域插槽数据（games) 在组件（MyFooter）但数据的结构需要组件的使用者（App）来决定

  2、在MyFooter通过slot传给App,App组件通过scope进行接收。

• App组件（vm）的管家。App不仅是组件，也管理所有的组件

• 
  
  
  ​

• 作用域插槽的MyFooter组件

• 
  ​
  
  ​
  

  ​