vue v-slot 指令

在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。目前 slot 与 slot-scope 这两个特性暂时还未被移除。

具名插槽

// 组件
Vue.component('lv-hello', {
  template: `
    

      
      
我的天呀
    
  `
})

  
  
    
我是头部
  
  
  
    
    
  

具名插槽的缩写

将 v-slot: 替换成 # 号

作用域插槽

所谓作用域插槽，就是让插槽的内容能够访问子组件中才有的数据。

Vue.component('lv-hello', {
  data: function () {
    return {
      firstName: '张',
      lastName: '三'
    }
  },

  template: `
    

      
      
我的天呀
    
  `
})

  
  
    
我是头部 {{ hh.firstName }} {{ hh.lastName }}