은 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을 사용하여 하위 구성 요소의 데이터를 상위로 전달해야합니다. 버튼 카운터 (두 개의 버튼과 메인 카운터 포함)는 좋은 예입니다. 다음과 같이

마찬가지로, 당신은 당신의 아약스 구성 요소에서 $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 조작에만 관련된 예제를 제공합니다.