vue3+tsx 内置组件不生效

李不太优秀
  • 5
新手上路,请多包涵

我的开发模式为 VUE3+TSX

我想使用VUE的内置组件<component />自动加载组件,代码为:

import { defineComponent } from 'vue'
import Comp1 from './components/Comp1'
import Comp2 from './components/Comp2'

export default defineComponent({
  name: 'App',
  components: {
    Comp1,
    Comp2
  },
  setup (){
    
    return {}
  },
  render() {
    return (
      <component is={ 'Comp1' }></component>
    )
  }
})

可是却未能生效,且有以下提示,大概意思就是组件没有注册,但是不知道在哪里引入vue的内置组件:
image.png

我尝试了用VUE自己的组件开发模式,试了是可行的,代码为:

<template>
  <div>asd</div>
  <component :is="'Comp1'" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Comp1 from './components/Comp1.vue'
// import Comp2 from './components/Comp2.vue'

export default defineComponent({
  components: {
    Comp1,
    // Comp2
  },
  setup() {
    return {}
  }
})
</script>

效果:
image.png

有知道的大佬,麻烦帮忙解答下

回复
阅读 423
1 个回答
李不太优秀
  • 5
新手上路,请多包涵
✓ 已被采纳

以下内容摘自文档,看来还是得多读文档/_ \

<component>is

在底层实现里,模板使用 resolveDynamicComponent 来实现 is attribute。如果我们在 render 函数中需要 is 提供的所有灵活性,我们可以使用同样的函数:

const { h, resolveDynamicComponent } = Vue

// ...

// `<component :is="name"></component>`
render() {
  const Component = resolveDynamicComponent(this.name)
  return h(Component)
}

就像 is, resolveDynamicComponent 支持传递一个组件名称、一个 HTML 元素名称或一个组件选项对象。

通常这种程度的灵活性是不需要的。通常 resolveDynamicComponent 可以被换做一个更直接的替代方案。

例如,如果我们只需要支持组件名称,那么可以使用 resolveComponent 来代替。

如果 VNode 始终是一个 HTML 元素,那么我们可以直接把它的名字传递给 h

// `<component :is="bold ? 'strong' : 'em'"></component>`
render() {
  return h(this.bold ? 'strong' : 'em')
}

同样,如果传递给 is 的值是一个组件选项对象,那么不需要解析什么,可以直接作为 h 的第一个参数传递。

<template> 标签一样,<component> 标签仅在模板中作为语法占位符需要,当迁移到 render 函数时,应被丢弃。

内置组件

诸如 <keep-alive><transition><transition-group><teleport> 等内置组件默认并没有被全局注册。这使得打包工具可以 tree-shake,因此这些组件只会在被用到的时候被引入构建。不过这也意味着我们无法通过 resolveComponentresolveDynamicComponent 访问它们。

在模板中这些组件会被特殊处理,即在它们被用到的时候自动导入。当我们编写自己的 render 函数时,需要自行导入它们:

const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue
// ...
render () {
  return h(Transition, { mode: 'out-in' }, /* ... */)
}
你知道吗?

宣传栏