uniのthis役割ドメイン問題
1844 ワード
カタログの紹介 01.まず、ケース を見てみましょう. 02.ソリューション を見てみましょう
01.まず一つのケースを見るコードは次のとおりです. は、クリックボタン1がtitleコンテンツを更新できることを発見したが、クリックボタン2はtitleコンテンツを更新できない.これはいったいどうしてですか. なぜchangeTitle 2はtitleの内容を変更できないのか changeTitle 2メソッドのsuccessメソッドでは、このsuccessメソッドは閉パケットを指すため、thisは閉パケットに属するため、successコールバック関数ではthisを直接使用することはできない.titleの.
02.ソリューションを見るは、このような動作によって、役割ドメインの問題 を解決することができることを発見することができる.第1のソリューション 解決策は、閉パケットの外でthisを別の変数 に割り当てることです.第2のソリューション 矢印関数を使ってもこの問題を解決できますが、なぜなのか考えてみましょう.
01.まず一つのケースを見る
{{title}}
export default{
data(){
return{
title : " ",
}
},
methods:{
changeTitle1(){
this.title = " 1";
},
// success ， this
changeTitle2(){
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
this.title = " 2";
console.log('changeTitle2------success');
}
});
},
}
}
02.ソリューションを見る
//
changeTitle3(){
//
var me = this;
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
me.title = " 3";
console.log('changeTitle2------success');
}
});
},
changeTitle4(){
uni.setStorage({
key: 'storage_key',
data: 'hello',
success:() => {
this.title = " 4";
console.log('changeTitle2------success');
}
});
},