Vue.js 3访问此未定义

798qvoo8 于 2023-03-19 发布在 Vue.js

关注(0)|答案(3)|浏览(244)

我是Vue.js 3的新手，但是我在访问组件中的“this”对象时有一个奇怪的行为。
如果我的组件是用script setup声明的，那么对“this”对象的访问总是未定义的，请参见下面的代码：

<script setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    console.info("Access KO: " + this)
  })
</script>

如果我使用export default，一切正常，请参见下面的代码：

<script>
export default {
  mounted() {
    console.info("Access OK: " + JSON.stringify(this) + "<<")
  }
}
</script>

你知道吗？
谢谢你，吉赛普

3条答案

Arrow functions有一个词法this，它在arrow函数中的值由周围的作用域决定。在您的示例中，没有周围的作用域。
这就是我们使用原始函数的原因。
尝试下面的代码，看看this是否正常工作

<script setup>
  import { onMounted } from 'vue';
 
  onMounted() {
    console.info("Access KO: " + this)
  })
</script>

**注意 ：与export default无关。如果您仔细观察，您在第二个代码块中使用的是原始函数，这就是它工作的原因。

onMounted使用回调，这种情况下的正确用法应该如下所示

onMounted(    () =>  console.info("Access KO: " + this))

刚刚在这里找到了解决方案Add global variable in Vue.js 3
但基本上，在安装过程中，这是不可用的，因此如果您有需要的变量，则应在应用程序创建时提供，并在需要时注入