将回调函数传递给 vue.js 指令

Question

所以我在 vue.js 中有一个指令，它非常方便让一个点处理整个应用程序的所有请求。您可以在此要点查看它

https://gist.github.com/jkirkby91-2/261fee5667efcf81648ab2a1a1c33c1b

但是每个使用它来处理请求的表单处理响应数据的方式完全不同。

所以我是否可以将回调函数传递给 ajax 指令来处理响应数据。

例如，我有一个创建新帖子 id 的表单，喜欢传递一个处理该响应的函数，我还有一个搜索表单，它的响应数据 id 喜欢处理以向我的地图添加标记。

Answer 1

您能否举例说明您如何使用directive？

我看到您的要点中有一个名为“完成”的参数。你打算这样用吗？

<your-ajax-component v-bind:complete="some_callback_fn()"></your-ajax-component>

这不是 params 的预期用途。 [params] 仅用于将数据传递给子组件。

您应该使用Custom Events 将数据从您的子组件传递给父组件。按钮计数器（有两个按钮和一个主计数器）就是一个很好的例子。

同样，您可以在 ajax 组件中使用 $emit()，如下所示：

// your-ajax-component
export default {
    methods: {
        doSomething: function (e) {
            this.$http.post("/api/some-url", {data}).then(response => {
                // your http action is done
                // now use $emit to communicate back to parent component
                this.$emit("ajax-complete", response)  // and you can pass the response data back
            }, error => {
                // your http action failed
                this.$emit("ajax-failed", error)  // parent component can handle this error from server
            })
        }
    }
}

现在从您的其他组件/路由的模板中，您可以插入 your-ajax-component 并监听事件，如下所示：

<your-ajax-component v-on:ajax-complete="some_callback" v-on:ajax-failed="error_callback"></your-ajax-component>

注意： directives 的用途非常不同。它用于访问 DOM 元素，以便您可以执行诸如聚焦元素之类的操作 - 将光标放在文本框中。

Custom Directives 的文档提供了仅与 DOM 操作相关的示例，与父子通信无关。