从Vue的“”中导出函数< script setup>，就像从模块中导出一样

2skhul33 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(331)

我想从“”部分中的组件导出一个函数，并在另一个组件中使用它。
我是这样试的：

<!-- 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 '../components/TestHeading.vue';
set_title('new title');
</script>

字符串
这只是给了我错误：<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.com/vuejs/rfcs/pull/227.
省略“导出”，我只是在TestDocument.vue中得到：Uncaught SyntaxError: import not found: set_title。
这个组件（TestHeading）在整个文档中只会出现一次，所以我应该可以使用这样一个全局函数来设置标题。

更新：* 找到了我的解决方法，而不是导出函数，我只是设置window.set_title = (new_title) => { ... }。似乎不那么干净，但我可能会使用这个，除非我找到一个更好的方法。

vue.js

来源：https://stackoverflow.com/questions/77506265/exporting-a-function-from-vues-script-setup-like-from-a-module

1条答案

按热度按时间

kmb7vmvb1#

您可以使用defineExpose宏公开函数，然后在子组件上使用模板引用：

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

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

 function set_title(new_title) {
  title.value = new_title;
}

defineExpose({
  set_title
})
</script>

个字符
但建议使用 prop 或插槽：

<!-- TestHeading.vue -->
<template>
  <h1>
    <slot/>
  </h1>
</template>

<script setup>

</script>

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

<script setup>
import { ref } from 'vue';
import { TestHeading} from '../components/TestHeading.vue';

const title = ref('title');

</script>

的字符串

赞(0）回复(0）举报 2023-11-21

我来回答

从Vue的“”中导出函数< script setup>，就像从模块中导出一样

1条答案

相关问题

热门标签

最新问答