在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)營銷  HTML/ .vue文件中,方法里面如何獲取當前組件的實例

.vue文件中,方法里面如何獲取當前組件的實例

如題,按照官網(wǎng)的步驟制作了個vue的demo,在為組件的某個元素綁定點擊事件后,想用this獲取當前組件的實例,但是發(fā)現(xiàn)獲取到的是這樣的,請問該如何獲取組件的實例?

代碼如下:

  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 @click="doSth">Essential Links</h2>
    <ul>
      <li><a  target="_blank">Core Docs</a></li>
      <li><a  target="_blank">Forum</a></li>
      <li><a  target="_blank">Community Chat</a></li>
      <li><a  target="_blank">Twitter</a></li>
      <br/>
      <li><a  target="_blank">Docs for This Template</a></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
        doSth: (e) => {
            console.log(e, this) //打印出來不是當前組件的實例
        }
    }
  }
</script>

打印出的this截圖如下,發(fā)現(xiàn)明顯不是當前組件的實例:

clipboard.png

回答
編輯回答
歆久

methods的定義不要用箭頭函數(shù)。

2017年12月15日 07:48
編輯回答
夢若殤

箭頭函數(shù)本身沒有this,繼承自父級執(zhí)行的上下文,而且是箭頭函數(shù)定義時候的其父級執(zhí)行上下文的this,上面的代碼里面doSth和箭頭函數(shù)是key,value的平級關(guān)系,都是在methods里面,所以this指向methods執(zhí)行的上下文

2018年1月15日 20:44