javascript - Exporting a function from Vue's "<script setup>" like from a module - Stack

admin管理员组

文章数量:1345903

I would like to export a function from a ponent from within the "" section and use it in another ponent.

I tried it like this:

<!-- TestHeading.vue -->
<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const title = ref('title');

export function set_title(new_title) {
  title.value = new_title;
}
</script>

<!-- TestDocument.vue -->
<template>
  <TestHeading />
  <p>Main text</p>
</template>

<script setup>
import { TestHeading, set_title } from '../ponents/TestHeading.vue';
set_title('new title');
</script>

This just gives me the error: <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at .

Omitting the "export" I just get: Uncaught SyntaxError: import not found: set_title in TestDocument.vue.

Is there a way to do it? The ponent (TestHeading) will only appear once in the whole document, so I should be able to set the title using a global function like this.

Update: Found my workaround, instead of exporting the function, I just set window.set_title = (new_title) => { ... }. Does not seem so clean, but I am probably going to use this unless I find a better way.

I would like to export a function from a ponent from within the "" section and use it in another ponent.

I tried it like this:

<!-- TestHeading.vue -->
<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const title = ref('title');

export function set_title(new_title) {
  title.value = new_title;
}
</script>

<!-- TestDocument.vue -->
<template>
  <TestHeading />
  <p>Main text</p>
</template>

<script setup>
import { TestHeading, set_title } from '../ponents/TestHeading.vue';
set_title('new title');
</script>

This just gives me the error: <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github./vuejs/rfcs/pull/227.

Omitting the "export" I just get: Uncaught SyntaxError: import not found: set_title in TestDocument.vue.

Is there a way to do it? The ponent (TestHeading) will only appear once in the whole document, so I should be able to set the title using a global function like this.

Update: Found my workaround, instead of exporting the function, I just set window.set_title = (new_title) => { ... }. Does not seem so clean, but I am probably going to use this unless I find a better way.

• javascript
• vue.js
• vue-ponent
• vue-position-api

Share Improve this question Follow edited Nov 18, 2023 at 12:30 betterworld asked Nov 18, 2023 at 9:07 betterworldbetterworld 26422 silver badges77 bronze badges 2

• Do not export from <script setup>. You place it in a separate file and export it. Then you import it into every <script setup> which might need it. <script setup> is at the receiving end of the import/export equation. <script setup> already has an export. If you want to modify it, you might want to use normal <script> for this ponent. – tao Commented Nov 18, 2023 at 13:54
• But, again, exporting anything else than the actual ponent from a .vue file is an anti-pattern. Do not use it. Anything you want to re-use should be placed in .js|ts files and imported in the .vue ponents needing them. – tao Commented Nov 18, 2023 at 13:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It turns out that, in addition to your <script setup> tag you can also have a normal <script> tag in a Vue SFC.

In that non-setup script tag, you are able to export as normal and those objects are importable from other modules.

// MyChildComponent.vue
<script setup>
// Bunch of Vue logic
</script>

<script>
export function myFunction() {};
</script>

<template>
// Bunch of Vue markup
</template>

<style scoped>
// Bunch of Vue style
</style>

// MyParentComponent.vue
<script setup>
import MyChildComponent, { myFunction } from "MyChildComponent.vue";
</script>

<template>
// Bunch of Vue markup
</template>

<style scoped>
// Bunch of Vue style
</style>

Easy? Yes!

Hacky?

本文标签： javascriptExporting a function from Vue39s quotltscript setupgtquot like from a moduleStack Overflow