Question

The export default statement does not seem to work inside <script setup>.

如果我试图在<条码>测试>上出口,那么:

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

  </div>
</template>


<script setup>
const x = 5

export default {
    x
}
</script>


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

and then importing it into another blog.vue:

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

I am getting this bulk of error:

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

Answer 1

You can maybe user this method.

<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>

Answer 2

创建以下新文档:*.d.ts,如vue.d.ts或以下贴现:vite-env.d.ts file (generate by vite)

declare module  *.vue  {
  import type { DefineComponent } from  vue ;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
  export default component;
}

and then you can use script setup> without defining two script tags

Answer 3

我没有看到这一点,因为我在此谈到同一问题:

你们只能使用固定的路障,把出口放在这个地方。

相关文件:https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script

Answer 4

使用<代码>的文字设置的部件在违约时关闭——从自己的笔中讲。

您需要使用<代码>defineExpose()。

<script setup>

const x = 5;

defineExpose({
  x
})
</script>

https://vuejs.org/api/sfc-script-setup.html#defineexpose

Answer 5

Hello i 只是从其他人那里看到的,这对我来说是好的。在打字之后添加名称,并将出口贵部分。

<script setup name="Greet">
</script>

这与《公约》一样。

 export const MyComponent = {
 name: "MyComponent" // I m not 100% set on this part}

因此,你只能在母体中添加这样的法典。

<script setup>
 import Greet from  ./components/Greet.vue ;
</script>

<template>
  <Greet/>
</template>

友情链接