Vue3动态渲染

Question

我有一个组件列表，我想从外部为它们设置一个配置，

例如：

 const myConfig = [
  {
    name: 'example',
    renderer: () => (<button @click="clickHanlder">Click me!</button>)
  },
  ...
 ];

对于我的组件，我想使用myConfig如下所示：

  <template>
    <div class="example">
      <template v-for="(item, index) in myConfig" :key="index">
        My Button:
        <div class="example-2">{{ item.renderer() }}</div>
      </template>
    </div>
  </template>

请注意，我不想使用slots

我怎样才能做到呢？

Answer 1

您可以通过使用h渲染函数来实现这一点，如以下示例所示：

<template v-for="(item, index) in myConfig" :key="index">
    My Button:
    <div class="example-2">
        <component :is="item.renderer" />
    </div>
</template>
<script setup lang="ts">

import {  h } from 'vue';

const myConfig = [
  {
    name: 'example',
    renderer: h('button', {
  
      onClick:clickHanlder
      
    },'Click me !'),
  },

 ];

 function clickHanlder(){
    console.log('click btn');
 }

</script>