如何在Vue中正确设置功能组件的样式？

Question

我具有以下功能组件，并且可以正常工作。

<template functional>
    <div>
        <input />
    </div>
</template>

<script>
export default {
    name: "FunctionalComponent"
}
</script>

<style scoped>
input {
    border: 2px solid red;
}
</style>

但是，Vue似乎在作用域样式方面存在一些问题。在vue devtools中，我看到了这个AnonymousComponent渲染，并且在控制台中看到了一些错误。如果我删除样式标签，则可以正常工作。

是预期的还是做错了什么？

Answer 1

这是vue-devtools上的错误。

（对于当前版本-5.1.1）没有错误的唯一方法是使组件 not functional。

已创建问题：https://github.com/vuejs/vue-devtools/issues/1067

Answer 2

问题不是我怀疑的范围样式。您的“导出默认”组件没有定义自己的名称。您在导入文件中命名它们。尝试删除组件的名称元素。 （我也很难复制。当我在codeandbox中切换到该框架时，在控制台中看不到错误。）