Vue2：我可以将可选（全局）过滤器传递给可重用组件吗？

Question

我对 Vue 很陌生。我正在处理 table 作为组件，这应该是很多次。到目前为止，一切顺利，但现在我想使用一个过滤器，它可以是可选的。

这就是我“调用”table的方式：

  <table
    :headers="headers"
    :items="some.data"
  ></table>

 data () {
    return {
      headers: [
        { title: 'date', value: ['date'], filter: 'truncate(0, 10, '...')' },
      ]
    }
  }

这是我的table组件

    <template>
<div>
  <table class="table">
    <thead>
      <tr>
        <!-- <th v-for="header in headers" :key="header.id" scope="col">{{ header.title }}</th> -->
        <th v-for="header in headers" :key="header.id" scope="col">
          {{ header.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id" scope="col">
        <td v-for="header in headers" :key="header.id" scope="row">
          <!-- {{item}} -->
          <span v-for="val in header.value" :key="val.id">
             {{item[val] | truncate(0, 10, '...') }}
          </span>
            <!-- {{header.filter}} -->
        </td>
      </tr>
    </tbody>
  </table>
  </div>
</template>

<script >


export default {
  name: 'Table',
  props: {
    headers: Array,
    items: Array
  }
}
</script>

我的全局过滤器：

Vue.filter('truncate', function (text, start, truncLength, clamp = '') {
  return text.slice(start, truncLength) + clamp
  // return text.slice(0, stop) + (stop < text.length ? clamp || ' ...' : '')
})

我正在跳跃，添加一个可选的过滤器（通过 v-if 我愿意为它添加）。到目前为止，我可以将过滤器呈现为字符串...但不执行它。

即使我将过滤器放在 span 中，它也不起作用（然后在控制台中显示“text.slice 不是函数”。

我用谷歌搜索没有成功，因为 filters/filter 它主要是关于如何在数据上使用 .filter(...) 作为 JS 方法，而不是 Vue 过滤器。

有什么建议吗？

Answer 1

过滤器是在 html 中的 JSX 模板中运行的函数。如何创建自定义 Vue.js 过滤器

的示例

Vue.filter('ssn', function (ssn) { // ssn filter
            return ssn.replace(/(\d{3})(\d{2})(\d{4})/, '--');
        });

正在使用

{{stringToTrans | ssn}}

要在此之外使用过滤器，您可以使用计算属性或像这样的标准函数

convertedDateString() { // computed
   return this.$moment(this.dateString).format('MM/DD/YYYY')
}

convertedDateString(dateString) { // method
   return this.$moment(dateString).format('MM/DD/YYYY')
}

Vue2：我可以将可选（全局）过滤器传递给可重用组件吗？

Vue2: Can I pass an optional (global) filter into a reusable component?

vue.js

vue-filter