javascript - v-model 仅在生产中抛出 ReferenceError

Question

我在 Vue 中有以下 View :

<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 × <script>标记和最大 1 × <script setup>每个 vue 组件。

它们的输出将被合并，合并它们的隐式或显式导出所产生的对象在 <template> 中可用。 .

但是它们没有连接。 这意味着:不要指望这两个 script 中的任何一个|标签可以看到另一个人的 import

最糟糕的是，虽然第一个 <script setup>确实声明 Ovewrite当你导入它时(所以它应该在 <template> 中可用)，第二个在你使用时覆盖它 components: { Overwrite: Overwrite } ，因为 Overwrite未在第二个脚本中定义。所以你的 components声明等同于:

components: { Overwrite: undefined }

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

---

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

解决方案 A:

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

解决方案 B:

<script setup>
import Overwrite from "../components/Overwrite.vue";
const text = ref('')
</script>

---

甚至:

<script setup>
import Overwrite from "../components/Overwrite.vue";
</script>
<script>
export default {
  data: () => ({ text: "" })
};
</script>