Vue.js Vue3 动态渲染

发布于03月28日

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

例如:

 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>

请注意，我不想用slot

我该怎么做？

推荐答案

您可以通过使用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>