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

 

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

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

 

一 代码

 

1 App组件

 

<template>
    <div>
        <pig>
            <!-- 默认作用域插槽 -->
            <h2 slot-scope="slotProps">王者荣耀 - {{slotProps.skill}}</h2>
        </pig>
    </div>
</template>
<script>
import Pig from "./pig";

export default {
  name: "App",
  data() {
    return {
      game: "王者荣耀"
    };
  },
  components: {
    Pig
  }
};
</script>
<style lang="css" scoped>
    h2{
        color:goldenrod;
    }
</style>

 

2 Pig组件

 

<template>
    <div>
      <!-- 给插槽绑定属性 -->
      <slot :skill="skill"/>
    </div>
</template>
<script>
export default {
  name: "Hero",
  data() {
    return {
      skill: "圈养时刻"
    };
  }
};
</script>

 

二 运行效果

 

 

三 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
    )
  }