javascript - 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>

它在控制台中向我发出此警告“无法解析过滤器:大写”

Answer 1

• 您应该在使用

  启动根实例之前使过滤器全局可用

  Vue.filter('uppercase', uppercase);
  

  其中大写可以是像

  这样的简单函数

  function uppercase(str)
    return str.uppercase();
  }
  

  这将是在所有 vue 组件上使用过滤器的最简单、最可靠的方法；

• 如果您通过 mixin 将过滤器导入到父级，为什么不在子级中使用该 mixin？

• 请不要使用 this.$parent 方法，因为它会使您的子组件静态依赖于该父组件。

  • 要使用 $parent 方法，您可能需要将父级的过滤器函数声明为子级中的过滤器:

    过滤器:{ 大写:this.$parent.$options.filters.uppercase }