zoukankan      html  css  js  c++  java
  • 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实例

  • 相关阅读:
    函数的逻辑读成零
    SQL逻辑读变成零
    体系结构中共享池研究
    执行计划基础 动态采样
    执行计划基础 统计信息
    识别低效率的SQL语句
    oracle 知识
    XPATH 带命名空间数据的读取
    ACTIVITI 研究代码 之 模版模式
    ACTIVITI 源码研究之命令模式执行
  • 原文地址:https://www.cnblogs.com/tony-stark/p/14543074.html
Copyright © 2011-2022 走看看