vue filters和directives的this指向

vue filters和directives的this指向

记录一次奇葩的需求。
要求自定义一个指令，点击后能跳转指定路由。
directives和filters压根就没法访问this。
脑袋都想破了。
不废话了，上代码。

<template>
    <div>
        <div v-join="(divData, that)">tag标签</div>
        <p>{{divData}}</p>
        <p>{{divData | sum(that)}}</p>
    </div>
</template>

<script>
export default {
    name: 'Main',
    data(){
        return {
            divData:'传入的值',
            that: this,
            filtersData: '过滤器的值'
        }
    },
    filters: {
        sum(val, that){
            return `${val}和${that.filtersData}`
        }
    },
    directives: {
        join: {
            inserted(el, binding){
                
            },
            bind(el, binding){
                console.log('------2')
                el.addEventListener('click', function(){
                    binding.value.that.$router.push({
                        path: '/aside'
                    })
                    
                })
            }
        }
    }
}
</script>

解决方案是在data中定义一个that变量指向this，再将这个变量当做参数传进directives，在directives内部就可以访问到this了，filters同理。

原文链接vue filters和directives访问this的问题