Vue之作用域插槽（slot-scope）

 

slot-scope可以创建作用域插槽，保存在vm.$scopedSlots中。

（从2.6.0开始，已经废弃了slot、slot-scope语法）。

 

一 代码

 

1 App组件

 

 

2 Pig组件

 

 

二 运行效果

 

 

三 App组件的渲染函数

 

var render = function() {
    var _vm = this
    var _h = _vm.$createElement
    var _c = _vm._self._c || _h
    return _c(
      "div",
      [
        _c("pig", {
          scopedSlots: _vm._u([
            // 默认作用域插槽
            {
              key: "default",
              //  渲染Pig组件时，执行此函数：{ skill: "圈养时刻" }
              fn: function(slotProps) {
                return _c("h2", {}, [
                  _vm._v(_vm._s(_vm.game) + " - " + _vm._s(slotProps.skill))
                ])
              }
            }
          ])
        })
      ],
      1
    )
  }