vue-如何在模板中使用渲染函数生成的vnode

Question

问题遇到的现象和发生背景

如代码所示，test方法返回一个vnode，我应该怎么去使用他，把他替换到ref为testdiv的渲染函数里面。

我想要达到的结果

我的期望是他应该会有一个类似v-render的方法可以直接替换修改-原转换后的渲染函数。但实际上vue好像不存在这个方法，请问有什么办法吗？

我的解答思路和尝试过的方法

之前有用过vue.comp创建组件再用v-is来修改，但是写起来颇为麻烦，且不美观，感觉不该这样子做，怀疑是自己想岔了，走入了误区。

问题相关代码

<template>
  <div>
    <div   v-render='test' ref="testdiv”></div>
    <div>...<!-- 此处省略很多行代码 --></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        text:'，而且获取到了数据'
    };
  },
  computed: {},
  methods: {
    test(){
        return  this.$createElement('span',{},`这是由渲染函数产生的文本vnode${this.text}`)
    }
  },
  mounted() {
    setTimeout(() => {
        this.text.push('，甚至还是响应式的')
    },5000);
  },
};
</script>

Answer 1

render 渲染函数 呈现一个组件状态

<script>
export default {
  name: "RenderCell",
  functional: true,
  props: {
    render: Function,
  },
  render: (h, ctx) => {
    return ctx.props.render(h);
  },
};
</script>

子组件想让其放置在哪使用就让其放置在哪里使用

            <render-cell :render="renderFunc"></render-cell>

renderFunc(){
   return this.render // 这个this.render 就可以是你的this.$createElement('span',{},`这是由渲染函数产生的文本vnode${this.text}`)
}

两者一样的逻辑 你可以参考这个实例去使用