Vue <script setup> - 如何处理多个动态组件？

Question

似乎无法将下面的选项 API 代码转换为 <script setup>:

    <template>
      <div>
        <component :is="layout">
          <router-view/>
        </component>
      </div>
    </template>
    
    <script>
    const defaultLayout = 'default'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    export default {
      name: 'App',
    
      components: {
        Dark,
        Light,
        Default
      },
    
      computed: {
        layout () {
          return (this.$route.meta.layout || defaultLayout)
        }
      }
    }
    </script>

我的尝试：

    <script setup>
    import { computed } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    const router = useRouter()
    const route = useRoute()
    
    const defaultLayout = 'default'
    const layout = computed(() => route.meta.layout || defaultLayout )
    </script>

结果：

没有使用 <script setup> 选项加载布局，只有 <default>、<dark> 或 <light> 块，例如：

    <div id="app">
    <default>
    ...
    ...
    </default>
    </div>

根据文档here，我们可以使用三元：

    <component :is="someCondition ? Foo : Bar" />

但这并不理想。因为您可能有 2 个以上的动态组件需要计算。我们不能让三元组太长。我们可以吗？

有什么想法吗？

Answer 1

诀窍是 return 引用的变量而不是它的名称。

    <script setup>
    import { computed } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    const router = useRouter()
    const route = useRoute()
    
    const layouts = {
      default: Default,
      light: Light,
      dark: Dark
    };
    
    const defaultLayout = 'default'
    const layout = computed(() => layouts[route.meta.layout || defaultLayout] )
    </script>

原因

虽然带有选项 API 的组件是 registered locally and can be resolved by it's name (string key), with <script setup> the components are used directly without registration，因此无法使用 string 键来解析它们...

Vue <script setup> - 如何处理多个动态组件？

Vue <script setup> - how to deal with multiple dynamic components?

vue.js

vue-component

vuejs3