Vue.js - 如何将过滤器从单独的文件导入组件？答案

【问题标题】：Vue.js - How to import a filter into a component from a separate file?Vue.js - 如何将过滤器从单独的文件导入组件？
【发布时间】：2018-12-01 05:30:58
【问题描述】：

我有一个带有 vue.js 组件 (MyComponent.vue) 的 vue-cli 项目。

我正在尝试将过滤器 (MyFilter.vue) 从单独的文件导入组件。

如果我将过滤器导出为对象，它会起作用，但如果我将它导出为函数，则不会。我错过了什么？

作品

//MyFilter.vue
<script>
  export default {
    capitalize: function(val){
      return val.toUpperCase();
    }
    //export filter as object
  }
</script>


//MyComponent.vue
<template>
  <div>
    <p><input v-model="myInput"></p>
    <p>{{myInput | capitalize}}</p>
  </div>
 </template>

<script>
  import Capitalize from './MyFilter';    
  //This import works

  export default {
    filters: {
      capitalize: Capitalize.capitalize       
      //This filter works
    },
   
  data: function() {
    return {
      myInput: 'test'
    }
  }
}
</script>

不工作

//MyFilter.vue
<script>
  export default function(val){
    return val.toUpperCase();
    //Export an function does NOT work
  }
</script>

//MyComponent.vue
<template>
  <div>
    <p><input v-model="myInput"></p>
    <p>{{myInput | capitalize}}</p>
  </div>
</template>

<script>
  import Capitalize from './MyFilter';    
  //This import does NOT work

  export default {
    filters: {
      capitalize: Capitalize       
      //This filter does NOT work
    },

    data: function() {
      return {
        myInput: 'test'
      }
    }
  }
</script>

当页面加载时，我收到此错误“Uncaught TypeError: Cannot read property 'functional' of undefined”

【问题讨论】：

我不知道为什么会这样，但是你可以在 main.js 文件中全局定义一个过滤器（或者你初始化new Vue的任何地方）——见here
是的。我知道这是一种选择。传入对象也是如此。我只是偶然发现了这个特定问题，无法弄清楚我做错了什么:)
它工作得很好。检查这个沙箱？？？ codesandbox.io/s/xrl18964np
所以，这与您导出/导入过滤器的方式无关
为什么您认为这是您导入过滤器的方式？该错误未提及过滤器或“大写”。

标签： webpack vue.js es6-modules

【解决方案1】：

为了将来参考，这不起作用的原因是过滤器是在 Vue (*.vue) 文件的脚本标记中定义的。

// MyFilter.vue

<script>
    export default function(val) {
        return val.toUpperCase();
    }
</script>

Vue 文件用于单个文件组件，并且作为从 Vue 文件的脚本标签内默认导出，我们通常发出一个组件选项对象。

当 Vue 尝试为 MyFilter.vue 文件设置热重载时，它需要一个组件选项。检查组件在选项中是否正常工作。 options.functional。而且，在这种情况下，选项是未定义的。所以，我们得到了错误

未捕获的类型错误：无法读取未定义的属性“功能”

因此，要吸取的教训是 Vue 文件适用于单文件组件，其他任何东西，普通 JS。

【讨论】：