检查Vue.js VNode是否为文本节点
检查Vue.js VNode是否为文本节点
提问于 2020-02-13 22:02:18
检查Vue.js虚拟节点(VNode)是不是文本节点的最佳方法是什么?例如，组件通过this.$slots接收的 虚拟节点。
换句话说，如果一个组件是这样使用的-
<MyComponent>
<template v-slot="a">My text</template>
<template v-slot="b"><MyOtherComponent/></template>
<template v-slot="c"><MyOtherComponent v-if="false"></template>
</MyComponent>-然后它应该只检测作为文本节点的this.$slots.a[0]，而不是this.$slots.b[0]或this.$slots.c[0]。
回答 2
Stack Overflow用户
发布于 2020-02-13 22:02:18
我目前的解决方案是：
function isTextVNode( vnode ) {
return vnode.text !== undefined && !vnode.isComment;
}TypeScript版本，带有一个类型谓词，允许您在text不为undefined的情况下访问它
function isTextVNode( vnode: VNode ): vnode is { text: string } & VNode {
return vnode.text !== undefined && !vnode.isComment;
}检查isComment是必要的，这样函数就不会像createEmptyVNode()创建的那样匹配空的注释占位符；然而，source code将isComment描述为“严格的内部”，所以我想知道是否有不依赖这个内部属性的解决方案。
Stack Overflow用户
发布于 2020-02-13 22:52:25
尽管isComment被列为内部组件之一，但Vue似乎在text node checking上使用了几乎相同的方法，而且您实际上非常接近：
const isNotTextNode = (c: VNode) => c.tag || isAsyncPlaceholder(c)其中isAsyncPlaceholder是一个在内部查找此isComment状态的函数，幸运的是它也被导出。
export function isAsyncPlaceholder (node: VNode): boolean {
return node.isComment && node.asyncFactory
}至少在2.6版中，这种内部属性检查似乎很普遍。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60209635
复制相关文章
相似问题
腾讯云开发者
