v-model 仅在生产中抛出 ReferenceError

Question

我在 Vue 中有以下视图：

<script setup>
import Overwrite from "../components/Overwrite.vue";
</script>
<template>
  <div>

      ...

      <textarea v-model="text" cols="99" rows="20"></textarea>

      ... 

  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  },
  components: { Overwrite: Overwrite },
};
</script>

当我启动应用程序时，一切都工作得很好npm run dev.

但是，当我构建用于生产的应用程序并运行它时，只要在文本区域中输入任何内容，就会收到以下错误：

index.57b77955.js:3 Uncaught ReferenceError: text is not defined
    at HTMLTextAreaElement.t.onUpdate:modelValue.s.<computed>.s.<computed> [as _assign] (index.57b77955.js:3:1772)
    at HTMLTextAreaElement.<anonymous> (vendor.31761432.js:1:53163)

我还有其他显示完全相同行为的表单元素。

Answer 1

您最多可以使用 1 个 \xc3\x97<script>标签，每个 vue 组件最多可以使用 1 个 \xc3\x97 <script setup>。

\n

它们的输出将被合并，并且通过合并其隐式或显式导出而产生的对象可在<template>.

\n

但它们并没有连接。这意味着：不要指望两个script标签中的任何一个能够比另一个import标签具有可见性。

\n

最糟糕的部分是，尽管第一个在导入时<script setup>确实声明了Ovewrite它（因此它应该在 中可用<template>），但第二个在您使用时会覆盖它components: { Overwrite: Overwrite }，因为Overwrite第二个脚本中没有定义。所以你的components声明相当于：

\n

components: { Overwrite: undefined }\n

\n

，它会覆盖已经声明的值<script setup>。

\n\n

这为您提供了两种可能的解决方案：

\n

方案一：

\n

<script>\nimport Overwrite from "../components/Overwrite.vue";\nexport default {\n  components: {\n    Overwrite\n  },\n  // you don't need `data` (which is Options API). use `setup` instead\n  setup: () => ({\n    text: ref('')\n  })\n}\n</script>\n

\n

方案B：

\n

<script setup>\nimport Overwrite from "../components/Overwrite.vue";\nconst text = ref('')\n</script>\n

\n\n

甚至：

\n

<script setup>\nimport Overwrite from "../components/Overwrite.vue";\n</script>\n<script>\nexport default {\n  data: () => ({ text: "" })\n};\n</script>\n

\n