官方说提问前先去 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>
老实说,这不是我想要的……
1
shintendo 2021-07-23 20:44:24 +08:00
TextBlock 和 "TextBlock" 能是一个东西吗
要么你把可能的组件全部 import,然后做一个组件名称到组件的映射,接口获取到组件名称后从映射里查找组件 要么 component: import('@/components/blockItem/${xxxxx}.vue')这样动态引入,webpack 应该会自动找到目录下的所有.vue 文件打包进来 |
2
shintendo 2021-07-23 21:47:31 +08:00
我又想了一下,好像理解你的问题了,你是指组件 import 以后自动注册了,因此应该用字符串组件名也可以引用到?
|
3
zeronofreya OP @shintendo 对,至少文档上说可以
|
4
shintendo 2021-07-24 22:03:49 +08:00
@zeronofreya 我印象中文档有说过不行的,因为这个自动注册是类似把 template 放到 script 的作用域里面,让它内访问里面的变量
|
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"/> |
6
zeronofreya OP @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 的应用,看来是我想多了。 感谢 |