jsx 中使用动态组件

最新推荐文章于 2024-04-09 09:40:05 发布

-D调定义之崽崽

最新推荐文章于 2024-04-09 09:40:05 发布

阅读量207

点赞数 1

文章标签：前端 javascript vue3 jsx

本文链接：https://blog.csdn.net/sinat_29740819/article/details/136793207

版权

本文展示了如何在Vue项目中使用ElementPlus库的图标组件，并通过data属性和jsx语法实现动态展示。NavigatorOne组件通过导入icon和title数据，展示了图标和文本的组合。

摘要由CSDN通过智能技术生成

index.js

import {
  Location
} from '@element-plus/icons-vue';

import { h } from 'vue';

const data = {
    title: 'Navigator One',
    icon: () => h(Location)
};

export default data;

index.vue

<script lang="jsx">
import { defineComponent } from 'vue';
import data from './index';

export default defineComponent({
  setup() {
    return () =>(
        <>
          <ElIcon>{data.icon()}</ElIcon>
          <span>{data.title}</span>
        </>
    }
  }
});
</script>