vue如何传递一个filter到子组件（父组件需要指定子组件需要调用的filter）？

Question

自己封装了一个table组件，参数有列头数组，其中定义了要绑定的字段，现在的问题是我需要传递一个过滤器到table组件，传递的是String类型的过滤器名称，但是在子组件里面该如何使用这个过滤器呢？

思路是，父组件里面定义好需要显示的列，以及需要显示的table数据。但是列有很多属性，例如：绑定的字段、用什么过滤器等等；子组件根据不同列的属性定义来具体显示。

这是自定义组件myTable

    name: 'myTable',
    props: {
        tabHeades: Array,
        tabDatas: Array,
    },
    methods: {
        //filterName 需要调用的过滤器名称
        //val 需要使用过滤器的值
        dynamicFilter(filterName, val) {
            //根据过滤器名称得到过滤器方法
            let filterObj = this.$options.filters[filterName]
            //使用过滤器方法
            return filterObj(val)
        }
    },    

//这种调用方式太难看，希望组件里面可以使用 {{ xxx | yesOrNo }} 这种方式来使用过滤器
<span v-if="head.filter">{{ dynamicFilter(head.filter, scope.row[head.key]) }}</span>

调用（父）组件：（里面需要传递很少列，不同的列可能需要指定不同的filter）

    tabHeades: [
        {label: '编号', key: 'id', isHidden: true},
        {label: '是否显示', key: 'IsShow', filter: 'yesOrNo'},//传递该列需要使用的过滤的名称

    ],

目前这个代码是可以得到预期效果的。

但是子组件里面的写法感觉太不好看了，我希望子组件里面可以使用 {{ xxx | yesOrNo }} 这种方式来使用过滤器，该如何修改呢？

Answer 1

为什么不考虑把过滤器全局注册呢？

---

更新一波
其实Vue的过滤器是可以传参数的，你可以像这样定义过滤器

Vue.filter('filter', function(val, name){//这是总的过滤器
  console.log(val, name)
    switch(name){//这里通过switch进行匹配
      case 'filter1': 
        return filter1(val);
      case 'filter2': 
        return filter2(val)
    }
})
// 下面的方法才是你具体的某些过滤器的方法
function filter1(val){
  return val +  ': 我是filter1'

}
function filter2(val){
  return val +  ': 我是filter2'
}

然后使用的话，传过滤器名字进入就行了

<template>
    <div>
        {{'hahaha' | filter(filter)}}
    </div>
</template>

<script>
export default {
    props: ['filter']
}
</script>

Answer 2

为啥不用mixin呢？写一个mixin，哪里要用哪里引啊多好

Answer 3

父组件

tabHeades: [
    {label: '是否显示', key: 'IsShow', filter: (val) => 处理函数(val)}, // 在父组件里处理或引入其他处理函数
],

子组件

...
<span>
{{ scope.row[head.key] | formatData(head.filter) }}
</span>
...
filters: {
    formatData(val, format) {
      if (typeof format === "function") return format(val);
      else return val;
    },
},

不知道这种是不是你想要的意思，看到有些晚了你可能也用不到了..