Vue.js에서 v-on과 같은 사용자 지정 지시어를 생성하는 방법

Vue.js에서 v-on과 같은 사용자 지정 지시어를 생성하는 방법

(학문을 위해) v-on과 같은 행동을 하는 지시어를 만들려고 한다.나는 이미 기능 전달을 값으로 사용할 수 있지만, 코드를 값으로 전달할 수 있는 방법을 알고 싶다.

사용 예:

<button v-onward:click="print">Test 1</button>
<button v-onward:click="testNumber = testNumber + 1">Test 2</button>

여기서 "인쇄"는 함수이고 "테스트 번호"는 구성 요소 데이터의 숫자다.

내가 하려던 일, 하지만 성공하지 못한 일.

directives:{
        'onward': {
            bind(el, binding, vnode){
                if(typeof binding.value === 'function')
                    el.addEventListener(binding.arg, binding.value);
                else
                    el.addEventListener(binding.arg, function(){
                        binding.value
                    });
            }
        }
    }

참조URL: https://stackoverflow.com/questions/47598720/how-to-create-a-custom-directive-like-v-on-in-vue-js