在自定义功能组件中使用 Quasar 组件时出错

Question

我正在使用带有自动加载选项的 Quasar 1.6.1（它会自动加载我使用的类星体组件，而无需我定义它们）。我写了一个使用 <q-tooltip> 的自定义功能组件，但是当我尝试运行时，我得到了这个错误：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

如果我不使用功能组件，它就可以工作。

<template functional>
  <div class="item q-mb-sm">
    <div class="text-small text-grey-6">{{ props.label }}</div>
    <div v-if="!props.longText">{{ props.text }}</div>
    <div v-else class="row q-gutter-sm">
      <div class="ellipsis col">
        {{ props.text }}
      </div>
      <div class="cursor-pointer">
        <img src="~assets/copy.svg" alt="copy" />
        <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
          Copy
        </q-tooltip>
      </div>
    </div>
  </div>
</template>

Answer 1

我认为您需要在 quasar.confg.js 中注册 QTooltip 组件。

framework: {
      components: [  
      'QTooltip',
   ]
}

组件 - 我已经测试了这个组件，它对我来说工作正常。

<template functional>
  <div class="q-mb-sm">
    <q-btn color="secondary" class="text-capitalize">Copy
      <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
        Copy
      </q-tooltip>
    </q-btn>
    {{props.test}}
  </div>
</template>

<script>
    export default {
        name: "test",
        props: ['test']
    }
</script>

<style scoped>

</style>

演示 - https://codesandbox.io/s/sharp-darwin-7h17m

在自定义功能组件中使用 Quasar 组件时出错

Getting error when using Quasar component inside a custom functional component

vue.js

quasar

quasar-framework