Vue2、Vue3中的$scopedSlots和$slots区别小结

// 作用域插槽的本质：一个函数，子组件调用时传入数据
this.$scopedSlots.default = function(data) {
  // 这个函数在父组件的作用域编译
  // 但参数 data 来自子组件
  return VNode  // 返回渲染好的节点
}

// 普通插槽的本质：父组件编译好的 VNode 数组
// 子组件只是被动接收
this.$slots.default = [VNode, VNode, ...]  // 已经是渲染好的节点

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <!-- 普通插槽 -->
    <ChildComponent>
      <div>{{ parentMessage }}</div>  <!-- ✅ 可以访问父组件数据 -->
      <!-- <div>{{ childMessage }}</div>  ❌ 不能访问子组件数据 -->
    </ChildComponent>
    <!-- 作用域插槽 -->
    <ChildComponent>
      <template v-slot:default="slotProps">
        <div>{{ parentMessage }}</div>  <!-- ✅ 可以访问父组件数据 -->
        <div>{{ slotProps.childMessage }}</div>  <!-- ✅ 可以访问子组件数据 -->
      </template>
    </ChildComponent>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentMessage: '父组件的数据'  // 父组件作用域
    }
  }
}
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <!-- 普通插槽：直接渲染父组件传来的内容 -->
    <slot></slot>
    <!-- 作用域插槽：将子组件数据传递给父组件 -->
    <slot :childMessage="childMessage"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      childMessage: '子组件的数据'  // 子组件作用域
    }
  }
}
</script>

// 父组件模板
<template>
  <child>
    <span>{{ message }}</span>  <!-- message 在编译时就绑定到父组件 -->
  </child>
</template>
// 编译后的渲染函数（简化）
render() {
  // 在父组件作用域中创建 VNode
  const children = [createVNode('span', null, this.message)]
  // 传递给子组件
  return h(Child, null, { default: () => children })
}

// 父组件模板
<template>
  <child>
    <template v-slot="props">
      <span>{{ props.message }}</span>  <!-- message 来自子组件 -->
    </template>
  </child>
</template>
// 编译后的渲染函数（简化）
render() {
  // 父组件不直接创建 VNode，而是创建一个函数
  const scopedSlotFn = (props) => {
    return createVNode('span', null, props.message)
  }
  // 把这个函数传递给子组件
  return h(Child, null, { default: scopedSlotFn })
}
// 子组件中
render() {
  // 子组件调用这个函数，传入自己的数据
  const vnode = this.$scopedSlots.default({ message: this.childMessage })
  return vnode
}

<!-- 子组件 Child.vue -->
<template>
  <div>
    <!-- 普通插槽 -->
    <slot></slot>
    <!-- 作用域插槽 -->
    <slot name="item" :data="itemData"></slot>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
const itemData = { name: 'Vue 3', version: 3 }
onMounted(() => {
  // Vue 3 中，所有插槽都是函数
  console.log(typeof $slots.default)  // 'function'
  console.log(typeof $slots.item)     // 'function'
  // 调用函数获取 VNode
  const defaultVNode = $slots.default()
  const itemVNode = $slots.item({ data: itemData })
  // 注意：Vue 3 中 $slots 返回的是 VNode 数组
  console.log(Array.isArray(defaultVNode))  // true
})
</script>