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>

Vue3 动态渲染

Vue3 dynamic render

vue.js

vue-component

vuejs3

vue-composition-api

vue-script-setup