vue template 如何可以使用 vnode ?

aplayer
  • 435

例如:

<template>
    <div>
        {{ renderChild( $createElement ) }}
    </div>
</template>

<script>
export default {
    methods: {
        renderChild ( h ) {
            return ( <div>Child</div> )
        },
    },
};
</script>

如果是上述的使用方式, 在 template 想渲染出 vnode 请问需要怎么做呢?

回复
阅读 11.1k
4 个回答

在第一眼看到题主的问题之后,感觉自己对vue似乎又多了一层模糊的感觉。。。

昨天搜了大部分资料后,又仔细琢磨了下官方文档,发现这好像是一个错误的写法。。。。。 我还天真的以为真的可以这样写。。。

首先这种写法毫无应用场景,其次vnode只在组件的render函数中会出现,其余地方似乎是没有意义的。可以参考下element的分页组件

我自己的做法

<template>
    <div>
        {{ renderChild( $createElement ) }}
        <slot></slot>
    </div>
</template>

<script>
export default {
    methods: {
        renderChild ( h ) {
            // 通过 slot 缓存起 vnode 结构
            this.$slots.default = ( <div>Child</div> );
        },
    },
};
</script>
看到另外一种在template里渲染VNode的方法,利用组件 template 动态渲染VNode
<template>
    <some-component>
      <div slot-scope="{ vnodes }">
        <vnodes :vnodes="vnodes"/>
      </div>
    </some-component>
</template>
components: {
  Vnodes: {
    functional: true,
    render: (h, ctx) => ctx.props.vnodes
  }
}

你应该是吧 template 中的 mustache {{}} 语法与 jsx 中的 {} 搞混了。

mustache 语法只能用来绑定文本节点,无法用来引用 vnode。而 jsx 中的 {} 才可以引用 vnode 节点。

如果你有确实需要 vnode 才能完成的需求,推荐你完全使用 jsx。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏