Vue如何从父级调用过滤器

Question

我怎样才能使用单个文件组件调用父过滤器。下面是我的代码。

app.js

import computed from '../vue/mixins/computed.js';
import filters from '../vue/mixins/filters.js';
import methods from '../vue/mixins/methods.js';

const app = new Vue({
    el: '#app',
    mixins:[
        computed,
        filters,
        methods
    ],
    mounted: function() {

    }
});

home.vue

<template>
    <div class="home-content">
        <h3>{{home | uppercase}}</h3>
    </div>
</template>
<script type="text/javascript">
    export default {
        data: function() {
            return {
                home: 'home'
            }
        },
        mounted: function() {
            this.$parent.$options.methods.makeConsole();
        }
    }
</script>

它在控制台中给我这个警告 "Failed to resolve filter: uppercase"

Answer 1

没有意义。只需将您的 mixin 也包含在 child 中即可。理想情况下，组件应该是自治的，并且不知道它在组件层次结构中的位置（至少不知道上面或同一级别的组件。

Answer 2

您应该在使用
启动根实例之前让过滤器全局可用
```
Vue.filter('uppercase', uppercase);
```
其中大写可以是像
这样的简单函数
```
function uppercase(str)
  return str.uppercase();
}
```
这将是在所有 vue 组件上使用过滤器的最简单可靠的方法；
如果你通过 mixins 将你的过滤器导入你的父级，你为什么不在子级中使用那个 mixin？
请不要使用 this.$parent 方法，因为它会使您的子组件静态依赖于该父组件。
- 要使用 $parent 方法，您可能需要将父级的过滤器函数声明为子级中的过滤器：
  
  过滤器：{ 大写：this.$parent.$options.filters.uppercase }

Vue如何从父级调用过滤器

Vue how to call filter from parent

javascript

vue.js

vue-component

vuejs2