将渲染方法注入到模板中

Question

Vue组件的render方法必须单独使用还是可以与模板结合使用？我的大部分组件都可以使用模板呈现，但只需要使用代码呈现其中的一小部分。如果可能的话，我如何将渲染方法输出与模板结合起来？

组件中的示例：

<template>
   <table>
      <tr>
        // use render method here
      </tr>
      <tr v-for="row in rows">
        // use render method here
      </tr>  
   </table>
</template>

上面的点需要渲染方法来循环遍历数组

$scopedSlots.column

，并根据父级提供的多个

<th>

渲染每个

<td>

和

<templates v-slot:column={row}>

。

Answer 1

据我所知，您可以使用渲染函数或模板 - 但不能同时使用两者。它们不能合并。

要使示例正常工作，您可以使用

v-html

指令，该指令会更新元素的

innerHTML

https://012.vuejs.org/api/directives.html#v-html .

new Vue({
  el: '#el',
  data: {
    rows: ['row1', 'row2', 'row3']
  },
  methods: {
    renderRow(row) {
      return `<td>${row}</td>`;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="el">
  <table>
    <tr v-for="row in rows" v-html="renderRow(row)">
    
    </tr>
  </table>
</div>

Answer 2

我也面临着同样的挑战。这就是我提出你的问题的方式。

正如其他人所说，似乎您可以使用模板或渲染函数，但不能同时使用两者。

我的建议是让组件只处理渲染函数，而父组件可以使用模板方法

所以，按照你的例子

<template>
   <table>
      <tr>
        <component-using-only-render-method />
      </tr>
      <tr v-for="row in rows">
        <component-using-only-render-method />
      </tr>  
   </table>
</template>

我认为这是两全其美且妥协最小的

Answer 3

import type { FunctionalComponent, VNode } from 'vue';

// https://vuejs.org/guide/extras/render-function#functional-components
interface Props { renderer: VNode }
const RenderFunction: FunctionalComponent<Props> = (props: Props) => props.renderer;
RenderFunction.props = {
    renderer: {
        type: Object,
        required: true
    }
};
export default RenderFunction;

用途：

<template>
<RenderFunction :renderer="renderer">
</template>
<script setup lang="tsx">
const renderer = (<div></div>);
</script>