如何從 vue3 中的設置腳本中獲取變量

Question

我將如何訪問在無設置腳本中的設置腳本中聲明的變量？ 當腳本標簽中發生某些事情時，我嘗試在下面的示例中更新消息。 但是，味精只是返回未定義，我查看了有關設置腳本的 Vue 文檔，但似乎沒有提到在無設置腳本中訪問變量。

<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

似乎您在這里混合了兩種語法 - 較新的組合 API（Vue3，設置腳本）和選項 API（Vue2 風格，一種具有數據和安裝功能）。 雖然使用 Options API 語法仍然可以，但您應該只使用兩者之一。 我建議閱讀不同的語法：

組成 API

選項 API

標簽是這種語法的語法糖。 setup() function 返回的所有內容都將可用於模板。 如果您使用標簽，默認情況下所有內容都可用。

對於 Options API 語法，數據 function 返回的所有內容都可用於模板。 刪除整個第一個標簽並嘗試將“msg”屬性添加到數據 function 返回的 object 中，看看它是否有效。

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