기능을 속성으로 Vue 구성 요소에 전달

기능을 속성으로 Vue 구성 요소에 전달

Vue 컴포넌트를 재사용 가능하게 하려고 하는데 상위 컴포넌트에 정의된 버튼 클릭 시 기능을 실행해야 하는 부분이 있습니다.컴포넌트의 버튼은 항상 상위 함수를 실행하고 전달되는 파라미터는 항상 동일합니다(다른 속성만).

현재 컴포넌트에 1) 객체와 2) 상위 함수 참조라는2개의 속성을 전달하고 있습니다.이러한 속성은 1) 객체가 파라미터로 필요합니다.

Child-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>

(자녀의 적절한 변화를 포함한다.)그러나 매개 변수를 전달하는 것은 그렇게 작동하지 않습니다.콜백이 호출될 때 변수가 자동으로 전달되도록 함수 참조에 '바인드'할 수 있습니까?

정보: 위와 같이 적어두면 오류 메시지가 표시되지 않지만 컴포넌트에 파라미터를 전달하면 Vue 전체가 실패합니다.

문제가 명확해졌으면 좋겠다:-) 감사합니다!

당신의 제안을 읽고 당신이 소품 패스를 너무 많이 사용하고 있다는 것을 알게 되었습니다.

하위 구성 요소가 상위 구성 요소가 데이터를 사용하는 방식에 대한 지식이 없어야 한다는 우려는 완전히 수용 가능합니다.이를 위해 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>

그러나 부모로부터의 방법으로 제공되는 데이터가 필요한 경우 상태 관리 시스템(심플한 이벤트 버스 또는 더 복잡한 이벤트일 수 있음)의 사용을 고려하는 것이 좋습니다.

그리고 마지막으로, 만약 당신이 정말로 그 방법을 소품으로 전달해야 한다면, 당신은 그것을 오브젝트에 넣고 그 오브젝트를 소품으로 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47559692/pass-function-as-property-to-vue-component