如何从 Vue3 中的 <script setup> 访问 <script> 中的名称？

Question

我想从 <script setup> 块中的 <script> 访问“name”变量。我似乎不知道该怎么做。我尝试从“*.vue”导入选项，但这提示我安装模块“*.vue”。

<script>
export default {
 name: 'some name'
}
</script>
<script setup>
 //use the 'name' variable here
</script>

Answer 1

不幸的是，这件事无法完成。ref您可以在文件中的任何位置使用和访问它的值。

<template>
 <h1>{{ name }}</h1>
</template>

<script setup>
import {ref} from 'vue';

const name = ref('Jorgen');

</script>

如果您想访问它的内部值，则<script setup>必须使用.value。我提供了以下示例，以防您想在 内的方法内使用它<script setup>，

<script setup>
import {ref} from 'vue';

const name = ref('Jorgen');

const showMyName = () => {
   alert(name.value);
}

</script>

简而言之，如果您想name在模板内部使用，请不要使用.value，如果您想在内部使用名称，请不要使用.value