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实例

原文地址:https://www.cnblogs.com/tony-stark/p/14543074.html