vue.js 2模板中输出VNode错在哪了?

Z时代
2024-02-22
分类：IT

模板内容:

<template>
  <div>
    <el-row>
        <h4 class="title-center" style="font-size:13px;">变更内容</h4>
        <table class="oams-table" v-loading="isLoding">
          <tbody>
            <tr v-for="(val,key,index) in alterBase" :key="index">
              <td class="title-center">{{ index+1 }}</td>
              <td>{{ printChangeItem(val.item) }}</td>
              <td class="value-column"><renderVDom :vNode="printAdapterExpr(val.item, val.before, 'before')"></renderVDom></td> 
              <td class="value-column"><renderVDom :vNode="printAdapterExpr(val.item, val.after, 'after')"></renderVDom></td>
            </tr>
          </tbody>
        </table>
    </el-row>
  </div></template>

script 内容:

export default {
  name: 'xxxx',
  components: {
    renderVDom: {
      props: {
        vNode: [Array, String, Object, Number] // 这里为什么要这么写其实报一个类型检测不通过我补一个的，一开始我只写了数组和字符串。因为我这里其实不一定是vnode，毕竟直接传字符串和数字也可以，干嘛非得是vnode
      },
      render (h) {
        return h('div', this.vNode)
      }
    }
  },
  props: {},
  methods: {
    printAdapterExpr(key, val, offset){
      return this.$createElement('span', { innerHTML: val })
    }
  }}

请大佬指点。先谢过了

回答：

script修正为:

export default {
  name: 'xxxx',
  components: {
    renderVDom: {
      props: {
        vNode: [Array, String, Object, Number]
      },
      methods:{
        isVNode(arg){
          // 获取 vnode 实例
          let _vnode = this.$createElement('span', '')
          // VNode 构造函数
          let __VNode = _vnode.constructor
          return arg instanceof __VNode
        }
      },
      render (h, context) {
        return this.isVNode(this.vNode) ? this.vNode : h('div', { domProps: { innerHTML: this.vNode } }, [])
      }
    }
  },
  props: {},
  methods: {
    printAdapterExpr(key, val, offset){
      // 若不存在直接输出
      // 1)非VNode
      return val
      // 2)
      //  2.1) JSX 
      // return <span>{val}</span>
      //  2.2) 创建VNode
      // return this.$createElement('span', val)
    }
  }}