Vue 구성 요소의 속성으로 함수 전달

Question

Vue 구성 요소를 재사용 할 수있게하려고하지만 부모 구성 요소에 정의한 버튼 클릭에 대한 기능을 실행해야하는 부분이 있습니다. 구성 요소의 버튼은 항상 상위 함수를 실행하며 전달되는 매개 변수는 항상 동일합니다 (다른 속성 만 해당).

지금 당장은 구성 요소에 2 개의 속성을 전달합니다. 1) 개체 및 2) 부모 함수 참조, 1) 매개 변수로 개체가 필요합니다.

아이 -Component이 (제거 불필요한 코드)과 같습니다

이

<button v-on:click="parentMethod(placement)">Analyze</button> 

Vue.component('reporting-placement', { 
    props: ['placement', 'method'], 
    template: '#reporting-placement', 
    methods: { 
     parentMethod: function(placement) { 
      this.method(placement); 
     } 
    } 
}); 

이 같은 아이의 부모가 만드는 사용 :

<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"></reporting-placement> 

methods: { 
     analyzePlacement: function(placement) { 
      this.active_placement = placement; 
     }, 
    } 

으로 당신이 볼 수 있습니다 , 자식에는 하나의 속성, placement 및 콜백 참조 만 있습니다. placement은 부모의 참조 함수에 대한 매개 변수로 넣어야합니다.

그러나 부모는 매개 변수를 정의하므로 하위 요소는 상위 함수에 전달해야하는 항목에 관심을 가져서는 안됩니다. 대신 부모에서 이미 매개 변수를 전달하는 것을 선호합니다.

그래서 대신

<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"></reporting-placement> 

나는

<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement(placement)"></reporting-placement> 

(아이의 적절한 변경을 포함)을 선호 할 것입니다. 그러나 매개 변수를 전달하는 것은 그렇게 작동하지 않습니다. 변수를 함수 참조에 '바인드'하여 콜백 호출시 자동 전달되도록 (다른 구문으로) 가능합니까?

Info : 위와 같이 쓰면 오류 메시지가 표시되지 않지만 구성 요소에 매개 변수를 전달할 때 전체 Vue 나사가 위로 오게됩니다.

호프 문제가 분명하다 :-) 많이 고마워!

Answer 1

귀하의 제안서를 읽음으로써 귀하가 소도시를 과도하게 사용하고 있음을 발견했습니다.

하위 구성 요소가 상위 구성 요소가 데이터를 사용하는 방식에 대해 전혀 알지 못한다는 우려는 완전히 받아 들일 수 있습니다. 이 작업을 수행하려면 메소드를 props로 전달하는 대신 Vue의 이벤트 브로드 캐스팅 시스템을 사용할 수 있습니다. 그래서 코드는 다음과 같이 될 것이다 :

Vue.component('reporting-placement', { 
    props: ['placement', 'method'], 
    template: '#reporting-placement', 
    methods: { 
     parentMethod: function(placement) { 
      this.$emit('reporting-placement-change', placement) 
     } 
    } 
}); 

그리고 당신은 다음과 같이 사용할 수 있습니다 :

<reporting-placement v-bind:placement="placement" @reporting-placement-change="analyzePlacement($event)"></reporting-placement> 

을하지만 당신은 그것을 고려하는 것이 좋습니다 부모 방법에 의해 제공되는 데이터를 필요로하는 경우 상태 관리 시스템 (단순한 EventBus 또는 이벤트 일 수있는 더 복잡한 Vuex)

마지막으로, 당신이 정말로 소품으로 메서드를 전달해야한다면/그것을 객체에 넣고 전달할 수 있습니다 그 물건은 소품으로.