vue如何传递一个filter到子组件(父组件需要指定子组件需要调用的filter)?

自己封装了一个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 }} 这种方式来使用过滤器,该如何修改呢?

阅读 2.3k
评论 更新于 2018-08-21
    2 个回答
    ovensi
    • 1.5k

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


    更新一波
    其实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>
    
    评论 赞赏 2018-08-21

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

      评论 赞赏 2018-08-21
        撰写回答

        登录后参与交流、获取后续更新提醒