V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zeronofreya
V2EX  ›  问与答

vue github 上如何发帖才不会被关闭?

  •  
  •   zeronofreya · 2021-07-23 20:28:41 +08:00 · 1267 次点击
    这是一个创建于 1217 天前的主题,其中的信息可能已经有所发展或是发生改变。

    官方说提问前先去 discord 之类的地方咨询,我问了但没人回答,发帖后被秒关,但我问的是一个很明显的 bug,也按要求填写了注意事项,并附上了 codesandbox 实例,不知道运营团队看没看就是了。

    那么,如果无法在官网进行提问,推荐的论坛也不行,那该怎么办呢?文档有写,但就是不行?

    比如: setup 语法会自动注册导入的组件——以此为前提

    vue 版本:3.1.5 ( beta 也试过了)

    <template lang="pug">
    component(v-for="c in blockList", :key="c.id", :is="c.component")
    </template>
    <script setup>
    import TextBlock from "@/components/blockItem/TextBlock.vue"
    
    ref: blockList = [
        {
            id: Symbol(),
            component: "TextBlock"   // 这个最终是要接口获取的,也只能存组件名称
        }
    ]
    </script>
    

    但渲染出来的是

    <text-block />
    

    无奈,最终妥协为如下写法:

    <script>
    import TextBlock from "@/components/blockItem/TextBlock.vue"
    export default { 
        components: {
            TextBlock
        }
     }
    </script>
    
    <script setup>
    // 其他代码
    </script>
    

    老实说,这不是我想要的……

    6 条回复    2021-07-26 01:27:19 +08:00
    shintendo
        1
    shintendo  
       2021-07-23 20:44:24 +08:00
    TextBlock 和 "TextBlock" 能是一个东西吗
    要么你把可能的组件全部 import,然后做一个组件名称到组件的映射,接口获取到组件名称后从映射里查找组件
    要么 component: import('@/components/blockItem/${xxxxx}.vue')这样动态引入,webpack 应该会自动找到目录下的所有.vue 文件打包进来
    shintendo
        2
    shintendo  
       2021-07-23 21:47:31 +08:00
    我又想了一下,好像理解你的问题了,你是指组件 import 以后自动注册了,因此应该用字符串组件名也可以引用到?
    zeronofreya
        3
    zeronofreya  
    OP
       2021-07-24 21:36:48 +08:00
    @shintendo 对,至少文档上说可以
    shintendo
        4
    shintendo  
       2021-07-24 22:03:49 +08:00
    @zeronofreya 我印象中文档有说过不行的,因为这个自动注册是类似把 template 放到 script 的作用域里面,让它内访问里面的变量
    shintendo
        5
    shintendo  
       2021-07-24 22:06:46 +08:00
    https://github.com/vuejs/rfcs/pull/227#issuecomment-870105222 你看一下这个是不是

    Within <script setup>, imported components are variables instead of a registered asset looked up using string keys. So when using imported components as dynamic components, instead of <component is="Foo">, it should be <component :is="Foo"/>. You can also use these variables in expressions, e.g. <component :is="ok ? Foo : Bar"/>
    zeronofreya
        6
    zeronofreya  
    OP
       2021-07-26 01:27:19 +08:00
    @shintendo

    https://vue3js.cn/docs/zh/guide/component-basics.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6

    ```
    上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现:

    <!-- 组件会在 `currentTabComponent` 改变时改变 -->
    <component :is="currentTabComponent"></component>
    在上述示例中,currentTabComponent 可以包括

    `已注册组件的名字,或`
    一个组件的选项对象
    ```

    嗯……的确没说 setup 的应用,看来是我想多了。

    感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1616 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:56 · PVG 00:56 · LAX 08:56 · JFK 11:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.