如何从vue3中的设置脚本中获取变量

Question

如何访问none安装脚本中安装脚本中声明的变量？当脚本标记中发生某些事情时，我尝试更新下面示例中的消息。然而，msg只是返回undefined，我已经查看了Vue关于安装脚本的文档，但似乎没有提到在none安装脚本中访问变量。

<script setup>
var msg = 'Hello!';
</script>
<script>
export default {
data() {
return {
};
},
mounted(){

// my current attempt to get msg and update it. However, I just get undefined.
this.msg = 'Something happened inside script tags';
//or msg = 'Something happened inside script tags';

},
</script>

<template>
<p>{{ msg }}</p>
</template>

Answer 1

这里似乎混合了两种语法-新的Composition API(Vue3，设置脚本(和Options API(Vue2样式，一种带有数据和已安装的函数(。虽然使用Options API语法仍然可以，但您应该只使用这两种语法中的一种。我建议阅读不同的语法：

成分API

选项API

标记是THIS类型语法的语法糖。setup((函数返回的所有内容都将对模板可用。如果您正在使用该标记，则默认情况下所有内容都可用。

对于Options API语法，数据函数返回的所有内容都可用于模板。删除整个第一个标记并尝试添加"；msg"属性，并查看它是否有效。

data() {
return {
msg: ''
};
}