vue中this到底指向谁

最新推荐文章于 2024-02-20 00:46:37 发布

Var521

最新推荐文章于 2024-02-20 00:46:37 发布

阅读量2k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/Var521/article/details/104978217

版权

本文探讨了在Vue中this的指向问题，区分了普通函数和箭头函数的区别。在非父子组件传值的场景下，箭头函数的this指向VueComponent实例，而普通函数的this则指向调用者Vue实例。

摘要由CSDN通过智能技术生成

今天，在练习代码的时候遇到了关于this指向谁的问题，因一直都未曾深究，始终处于懵懂状态，这次决定把他弄明白，故有此笔记。
问了前辈，前辈告诉我：“现在前端有两种this：

1. 普通的this始终指向调用者
2. 而箭头函数的this由上下文决定
”。

此例子是非父子组件相互传值：

<body>
  <div id="app">
    <div>父组件</div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
   //1.创建两个兄弟组件
   //2.提供事件中心
   var hub = new Vue();
   hub.name = 'hub';
   Vue.component('test-tom'