Vue技术问询：能否在模板中渲染VNodes？插槽如何输出接收的原始VNodes？

嘿，很高兴能帮你搞定这两个Vue相关的问题！咱们一个个来拆解：

当然可以！不过Vue模板本身没法直接把VNode变量像普通文本那样插值，得用个小技巧——通过一个极简的“中转组件”来帮我们渲染VNode。

举个Vue 3的例子：

<template>
  <!-- 在模板中使用中转组件渲染VNode -->
  <render-vnode :vnode="myCustomVNode" />
</template>

<script setup>
import { h } from 'vue'

// 先创建一个VNode实例
const myCustomVNode = h('div', { class: 'vnode-demo' }, '这是通过render函数生成的VNode')

// 定义中转组件，专门用来接收VNode并渲染它
const RenderVNode = {
  props: ['vnode'],
  render(props) {
    return props.vnode
  }
}
</script>

Vue 2的思路类似，只是用函数式组件更高效：

<template>
  <render-vnode :vnode="myCustomVNode" />
</template>

<script>
import Vue from 'vue'

const myCustomVNode = Vue.h('div', { class: 'vnode-demo' }, 'Vue 2的VNode示例')

const RenderVNode = {
  functional: true,
  props: ['vnode'],
  render(h, context) {
    return context.props.vnode
  }
}

export default {
  components: { RenderVNode },
  data() {
    return { myCustomVNode }
  }
}
</script>

这个场景太实用了！其实核心思路和上面一样——用中转组件来渲染插槽接收到的VNode数据。

假设父组件通过render函数给子组件的作用域插槽传递了包含VNode的数据：

// 父组件（用render函数编写）
import { h } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  render() {
    // 构造包含VNode的数据源
    const slotData = {
      title: '插槽标题',
      contentVNode: h('span', { style: { color: 'blue' } }, '我是父组件传递的VNode内容')
    }

    // 向子组件的作用域插槽传递数据
    return h(ChildComponent, {}, {
      default: (props) => {
        // 这里props就是子组件插槽暴露的数据，包含contentVNode
        return h('div', [
          h('h3', props.title),
          // 直接渲染VNode
          props.contentVNode
        ])
      }
    })
  }
}

如果父组件用模板语法写插槽，就可以直接用上文的RenderVNode组件：

<!-- 父组件模板 -->
<ChildComponent>
  <template #default="{ title, contentVNode }">
    <h3>{{ title }}</h3>
    <!-- 用中转组件渲染接收到的VNode -->
    <render-vnode :vnode="contentVNode" />
  </template>
</ChildComponent>

子组件的模板只需要把数据暴露给插槽就行：

<!-- ChildComponent.vue -->
<template>
  <div class="child-wrap">
    <slot :title="slotTitle" :contentVNode="slotContent" />
  </div>
</template>

<script setup>
import { h } from 'vue'
const slotTitle = '来自子组件的标题'
const slotContent = h('span', { style: { fontWeight: 'bold' } }, '子组件生成的VNode内容')
</script>

这样就能完美实现“让作用域插槽按需使用传递过来的VNode”的需求啦！

内容的提问来源于stack exchange，提问作者Emanon