Question

所以我在vue.js中有一个指令，这对于在应用程序中处理所有请求的单个点非常方便。你可以在这个要点上查看它

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

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

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

所以例如我有一个表单，创建一个新的帖子ID，如传递一个处理该响应的函数，我也有一个搜索表单，响应数据ID像处理添加标记到我的地图。

Answer 1

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

我看到你有一个名为＆＃34;完成＆＃34;的参数。在你的要点。你打算像这样使用它吗？

<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
            })
        }
    }
}

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

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

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

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

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

1 个答案: