从 Vue.js 组件调用方法答案

【问题标题】：Call a method from the Vue.js component从 Vue.js 组件调用方法
【发布时间】：2017-05-02 10:41:37
【问题描述】：

我是 Vue.js 的新手

我只想从组件调用一个方法：

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['createdat'],
            template: '
            <div>
              {{ postedOnA(createdat) }}
              {{ postedOnB(createdat) }}
            </div>',
        },
        methods: {
            postedOnA: function (createdat) {
                var date = new Date(createdat);
                return date.getHours() + ' ' + date.getMinutes();
            }
        }
    },
    methods: {
        postedOnB: function(createdat) {
            var date = new Date(createdat);
            return date.getHours() + ' ' + date.getMinutes();
        }
    }
})

我也尝试过调用组件方法，但这也不起作用

谢谢

【问题讨论】：

将“方法”带到“消息”组件的级别，就在模板之后。
@Deepak，非常感谢，这很有效。但是我怎么能调用 postedOnB() ??
Parth 你到底想在这里做什么。您的功能对我来说更像过滤器。请参考vuejs.org/v2/guide/syntax.html#Filters
是的，这里的过滤器似乎更合适。基本上，我只是在格式化日期。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

为格式化创建过滤器。

在你的情况下：

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['createdat'],
            template: '
            <div>
              {{ createdat | formatdate }}
            </div>',
        }
    },
    filters: {
      formatdate: function (value) {
         var date = new Date(value);
         return date.getHours() + ' ' + date.getMinutes();
      }
    }
})

在此处阅读更多信息：https://vuejs.org/v2/guide/filters.html

【讨论】：

如果你能告诉我如何访问位于 Vue 实例的根级别而不是组件级别的过滤器会很好。
以上示例在根实例上设置过滤器，可以从任何组件访问。
我试过了，但没有在全局范围内工作：[Vue 警告]：无法解析过滤器：格式化日期（在中找到 - 使用“名称”选项以获得更好的调试消息。）跨度>
请提供一个小提琴，我会调查的。我已经测试了上面的代码，它可以在小提琴中使用。