如何使用变量动态包含 Nuxt 3 组件？

Question

在 Nuxt 2 中，我根据使用中的数据动态定义了组件：

<component :is="item.contentType" :entry="item" />

好像在Nuxt 3中，动态组件只能和字符串一起使用，不能和变量一起使用：

<script setup>
const stringResolution = resolveComponent('content/someComponentName')
const variableResolution = (contentType) => resolveComponent(`content/${contentType}`)
</script>

<template>
  <!-- works -->
  <component :is="stringResolution" :entry="item" />
  <!-- fails -->
  <component :is="variableResolution(item.contentType)" :item="item" />-->
</template>

错误：

Failed to resolve component: content/someComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

Answer 1

在 Nuxt 3 中，动态组件仍然可以使用 :is 绑定与变量一起使用。问题是 resolveComponent 函数需要一个字符串参数，所以当你传入

variableResolution(item.contentType)

时，它不会将其识别为字符串。

要完成这项工作，您可以更改

variableResolution

函数以返回字符串而不是返回字符串的函数：

<script setup>
const stringResolution = resolveComponent('content/someComponentName')
const variableResolution = (contentType) => `content/${contentType}`
</script>

<template>
  <component :is="stringResolution" :entry="item" />
  <component :is="variableResolution(item.contentType)" :entry="item" />
</template>

这样，variableResolution函数返回一个可以被resolveComponent识别的字符串。