vue中使用this遇到的坑

Posted 2020-12-03 whitewen

在两个页面中创建函数，并且调用一个函数中能够获取到代表vue实例的this，而另一个却获取不到

页面1：

1 <button id="login" v-text="$t(‘m.btn_0001‘)" @click="submit(form)"></button>

 1 export default {
 2   name: ‘Login‘,
 3   data () {
 4     return {
　　　　　　form: {}
 5     }
 6   },
 7   components: {},
 8   methods: {
 9     ‘submit‘: login
10   }
11 }

1 // 点击登录
2 function login (Para) {
3   console.log(this) // vue实例
4 }

页面2--在vue实例创建后立马执行函数：

 1 export default {
 2   name: ‘ProjectList‘,
 3   data () {
 4     return {
 5     }
 6   },
 7   created () {
 8     this.getProjectList() // 函数中this 指向vue实例
 9     getProjectList2(this) // 函数中this 为undefined，th为vue实例
10   },
11   methods: {
12     ‘getProjectList‘: getProjectList
13   },
14   computed: {
15   }
16 }
17 
18 function this.getProjectList () {
19   console.log(this)  
20 }
21 
22 function this.getProjectList2 (th) {
23   console.log(th)
24   console.log(this)  
25 }