vue.js - 如何从 Vue3 中的 <script setup> 访问 <script> 中的名称？

Question

我想从我的 <script setup> block 中的 <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