vue中this到底指向谁

最新推荐文章于 2025-11-05 20:26:38 发布

原创最新推荐文章于 2025-11-05 20:26:38 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

今天，在练习代码的时候遇到了关于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',{
     data() {
       return {
         num:0
       }
     },
     template:`
      <div>
        <div>Tom:{{num}}</div>
        <div><button @click='handle()'>点击</button></div>
      </div>
     `,
     methods: {
       handle(){
        hub.$emit('jerry-event',2);
       }
     },
     mounted() {
       hub.$on('tom-event',(val)=>{
         console.log(this);//箭头函数的this
         
         this.num += val;
       })
     },
   });
   Vue.component('test-jerry',{
     data() {
       return {
         num:1
       }
     },
     template:`
      <div>
        <div>Jerry:{{num}}</div>
        <div><button @click='handle()'>点击</button></div>
      </div>
     `,
     methods: {
       handle(){
         //触发事件
        hub.$emit('tom-event',1);
       }
     },
     mounted() {
       hub.$on('jerry-event',function(val){
       console.log(this.name); //普通函数的this
       })
     },
   });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },

    });
  </script>
</body>

打印结果：
在这里插入图片描述

   var hub = new Vue();
   hub.name = 'hub';
   Vue.component('test-jerry',{
     data() {
       return {
         num:1
       }
     },
     template:`
      <div>
        <div>Jerry:{{num}}</div>
        <div><button @click='handle()'>点击</button></div>
      </div>
     `,
     methods: {
       handle(){
         //触发事件
        hub.$emit('tom-event',1);
       }
     },
     mounted() {
       hub.$on('jerry-event',function(val){
       console.log(this); //普通函数的this
       console.log(this.name);
       
       })
     },
   });