Vue & lt;脚本setup>如何处理多个动态组件?

2022-01-30 09:29:52 标签 vue.jsvue-componentvuejs3

这似乎是不可能的转换选项API代码下面的脚本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>

结果:

没有布局加载<脚本setup>选项,但只是一个默认选项& lt; dark>或& lt; light>块为例:

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

根据这里的文档,我们可以使用一个三元:

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

但这并不理想。因为您可能需要计算出两个以上的动态组件。我们不能让三进制太长。我们可以吗?

什么好主意吗?

###这个技巧是返回被引用的变量而不是它的名字。

    <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组件是在本地注册的,并且可以通过它的名称(字符串键)与脚本setup>这些组件没有注册就直接使用,所以不可能使用字符串键来解析它们…

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码