future.png
珠玑技术随笔
联系/Contact:
future.png

Vue 3.2 写一个动态组件

2021年07月18日

Hsu

2分钟

Vue3.2 更新了 script setup 语法糖,再也不用在 setup 函数里 return 一大堆了,默认所有变量都是导出的,写法跟 React 很接近,写起来很顺畅。
Vue3.2 模板语法和顺序发生了变化、script setup 标签内就是 Vue3 版本里的 setup()函数。

Vue3.2 结构

<script lang="ts" setup>
  // TypeScript
</script>

<template>
  <!-- 模板 -->
</template>

<style>
  /* 样式 */
</style>

Vue3 结构

<template>
  <!-- 模板 -->
</template>


<script lang="ts">
import {defineComponent} from 'vue'
  export default defineComponent({
    setup(){

    }
  })
  // TypeScript
</script>


<style>
  /* 样式 */
</style>

重新实现动态组件代码

<script lang="ts" setup>
import { computed, ref } from "vue";
import Table1 from "./tables/Table1.vue";
import Table2 from "./tables/Table2.vue";
import Table3 from "./tables/Table3.vue";

const currentTable = ref<string>("Table1");

interface ITable {
  name: string;
  value: string;
}

const tables = ref<ITable[]>([
  {
    name: "表格1",
    value: "Table1",
  },
  {
    name: "表格2",
    value: "Table2",
  },
  {
    name: "表格3",
    value: "Table3",
  },
]);

const setCurrentTab = (tableName: string) => {
  currentTable.value = tableName;
};

const currentTabComponent = computed(() => {
  if (currentTable.value === "Table1") return Table1;
  if (currentTable.value === "Table2") return Table2;
  if (currentTable.value === "Table3") return Table3;
  return Table1;
});
</script>

<template>
  <!-- 生成切换表格按钮 -->
  <div style="padding: 4px">
    <a-radio-group v-model:value="currentTable">
      <a-radio-button
        v-for="table in tables"
        :key="table.value"
        :value="table.value"
        @click="setCurrentTab(table.value)"
      >
        {{ table.name }}
      </a-radio-button>
    </a-radio-group>
  </div>
  <!-- 动态三组件 -->
  <div>
    <component :is="currentTabComponent" />
  </div>
</template>

<style></style>