передавая функцию обратного вызова в директиву vue.js

Question

, поэтому у меня есть директива в vue.js, которая довольно удобна для того, чтобы иметь единственную точку, которая обрабатывает весь запрос через приложение. Вы можете просмотреть его на этой сутью

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

, но любой форме, которая использует это, чтобы обработать запрос обрабатывает данные ответа совершенно разные.

поэтому возможно, что я могу передать функцию обратного вызова в директиву ajax для обработки данных ответа.

поэтому, например, у меня есть форма, которая создает новый идентификатор сообщений, как передать функцию, которая обрабатывает этот ответ, у меня также есть форма поиска, которая с идентификатором данных ответа, как и для добавления маркеров на мою карту.

Answer 1

Можете ли вы привести пример того, как вы используете directive?

Я вижу, что у вас есть параметр «полный» в вашем значении. Вы собираетесь использовать его так?

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

Это не предназначение использования параметров. [params] предназначен только для передачи данных дочернему компоненту.

Вы должны использовать Custom Events для передачи данных из дочернего компонента в родительский. Отличным примером является счетчик кнопок (с двумя кнопками и основным счетчиком).

Кроме того, вы можете использовать $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 v-on:ajax-complete="some_callback" v-on:ajax-failed="error_callback"></your-ajax-component> 

Примечание:directives служат совершенно иной цели. Это для получения доступа к элементу DOM, так что вы можете сделать что-то вроде фокусировки элемента - поместите курсор в текстовое поле.

В документации для Custom Directives приведены примеры, относящиеся только к манипуляции с DOM, а не к сообщениям родитель-потомок.