如何从 Vue 3 的内部脚本设置中导出默认值？答案

【问题标题】：How do you export default from inside script setup in Vue 3?如何从 Vue 3 的内部脚本设置中导出默认值？
【发布时间】：2022-08-09 17:21:03
【问题描述】：

导出默认语句似乎在<script setup> 中不起作用。

如果我尝试在test.vue 中导出它：

<template>
  <div id=\"test\" class=\"test\">

  </div>
</template>


<script setup>
const x = 5

export default {
    x
}
</script>


<style scoped lang=\"scss\">
</style>

然后将其导入另一个blog.vue：

<script setup>
import x from \'./test\'
</script>

我收到大量错误：

app.js?id=3b6365f542826af47b926162803b3ef6:37396 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of null (reading \'content\')
    at selectBlock (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/select.js:23:45)
    at Object.loader (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/index.js:67:41)
    at Object../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:37396:7)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:60116:217)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../resources/vue/backend/components/test.vue (app.js?id=3b6365f542826af47b926162803b3ef6:59477:102)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/blog.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:37336:63)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../resources/vue/backend/components/blog.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:60084:217)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js @ app.js?id=3b6365f542826af47b926162803b3ef6:37396
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js @ app.js?id=3b6365f542826af47b926162803b3ef6:60116
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/vue/backend/components/test.vue @ app.js?id=3b6365f542826af47b926162803b3ef6:59477
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/blog.vue?vue&type=script&setup=true&lang=js @ app.js?id=3b6365f542826af47b926162803b3ef6:37336
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/vue/backend/components/blog.vue?vue&type=script&setup=true&lang=js @ app.js?id=3b6365f542826af47b926162803b3ef6:60084
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/vue/backend/components/blog.vue @ app.js?id=3b6365f542826af47b926162803b3ef6:59328
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/js/router.js @ app.js?id=3b6365f542826af47b926162803b3ef6:39847
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
./resources/js/app.js @ app.js?id=3b6365f542826af47b926162803b3ef6:39770
__webpack_require__ @ app.js?id=3b6365f542826af47b926162803b3ef6:64806
(anonymous) @ app.js?id=3b6365f542826af47b926162803b3ef6:64971
__webpack_require__.O @ app.js?id=3b6365f542826af47b926162803b3ef6:64843
(anonymous) @ app.js?id=3b6365f542826af47b926162803b3ef6:64973
(anonymous) @ app.js?id=3b6365f542826af47b926162803b3ef6:64975

脚本设置的目的是跳过样板代码。这包括“导出默认值”。它是一个默认从 .vue 导出的组件。考虑解释你想要达到的目标。
我在想可能有一段时间我想从一个 vue 组件中导出一个全局 js 函数，但我知道这是一个边缘案例。
是的。如果需要可重用代码，.js 文件是最好的地方，而不是 .vue

标签： vue.js vuejs3 vue-script-setup

【解决方案1】：

您也许可以使用此方法。

<script>
import { defineComponent } from 'vue'
import { ref, reactive, computed } from 'vue'
export default defineComponent({
  name: 'xxxComponent',
})
</script>
<script setup>
    const x = ref(5)
    // computed
    const computedVariable = computed(() => {
        return object.variable
    })
    // methods
    const updateModalCookieInitialOpenMethod = (val) => {
        cookies.updateCookieSettings(val)
        cookies.updateModalCookieInitialOpen()
    }
</script>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

创建文件 *.d.ts，如 vue.file.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const Component: DefineComponent<{}, {}, any>;
  export default Component;
}

然后您可以使用script setup> 而不使用导出默认值或使用导出默认值defineComponent

【讨论】：