Question

我有一个带有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：无法读取未定义的属性'functional'”

Answer 1

供以后参考，之所以不起作用，是因为该过滤器是在Vue（* .vue）文件的脚本标签中定义的。

// MyFilter.vue

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

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

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

未捕获的TypeError：无法读取未定义的属性“ functional”

因此，要学习的教训是Vue文件是用于单个文件组件的，其他任何东西都是普通的JS。

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

1 个答案: