😉博主:初映CY的前说(前端领域) ,📒本文核心:uniapp中this指向问题
前言:this大家知道是我们当前项目的实例,我们可以在这个this上面拿到我们原型上的全部数据。这个常用在我们在方法中调用其他方法使用。
⭐一、uniapp中this指向 简而言之,记住一句话:箭头函数可以修改this指向 下面来看这个例子,我是用uni官网的api举个例子uni.getSystemInfo
```javascript<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view></view></template><script>export default {data() {return {title: 'Hello'}},onLoad() {this.getInfo()},methods: {getInfo(){uni.getSystemInfo({fail: function (res) {console.log(res,this)},success: (res) => {console.log(this,'this');}});}}}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}</style>注意点:我调用方法中成功success使用的是箭头函数,此刻我们可以看到我们的this是什么 展开就是我们当前实例 那我们用传统的非箭头试试看: 代码修改如下: 日志输出查看,我们的this找不到了 总结:使用uniapp中api的时候一定是需要使用箭头函数的呦,同理这是使用vue语法中时刻需要注意的。
至此本文结束,愿你有所收获! 期待大家的关注与支持! 你的肯定是我更新的最大动力!!!