vue filter中無法訪問this的解決方案

或許vue的filter就被設計的簡易----用來過濾豎線左邊的值，所以猶大沒有把他設計得很臃腫，

當一些特殊情況需要我們在filter中獲取this的時候，可以如此：

<template>
<div>
{{value|xxx(currentvm)}}
</div>
</template>

data(){
  return {
  value:123,
   currentvm:this
}
}
filters:{
  xxx(v,vm){
   console.log(vm) //這樣可以訪問vm
}
}

或者在方法中：

<template>
<div>
{{value|xxx(getCurrentContext)}}
</div>
</template>

data(){
  return {
  value:123,
   currentvm:this
}
},
filters:{
  xxx(v,vm){
   console.log(vm()) //這樣可以訪問vm
  // getCurrentContext已經被vue所綁定過，無論在哪個語法環境都將返回當前的vue實例
}
},
methods:{
  getCurrentContext(){
    return this
} 
}

最后一種是直接傳入this

<template>
<div>
{{value|xxx(this)}}
</div>
</template>

data(){
  return {
  value:123,
   currentvm:this
}
},
filters:{
  xxx(v,vm){
   console.log(vm) //這樣可以訪問當前的this
}
}

 

猜想：針對上述3種方案 優越性：第三種>第二種>第一種，第一種造成了一種遞歸的結構，類似於下述：

 

 

 暫時不知道這種結構對於vue的響應式的影響，

而第二種與第三種則沒有這種困惑，直接獲得當前的vue實例