사용자 지정 VueJS 지침에서 변수를 선언하는 방법

사용자 지정 VueJS 지침에서 변수를 선언하는 방법

이렇게 통상적인 방법으로 변수를 선언하려고 했을 때 오류가 생겼다.

   Vue.directive('my-directive', {
        varA: '', 
        inserted: function(el, binding, vnode){
              this.varA = 'test'; // TypeError: Cannot set property 
                                  // 'varA ' of undefined
        },
    });

TypeError: 정의되지 않은 속성 'varA'를 설정할 수 없음

Vue 명령에서 변수를 어떻게 선언하십니까?

Vue 명령에서 값을 저장해야 할 때는 일반적으로 요소에 저장된다.

Vue.directive('my-directive', {
  inserted: function(el, binding, vnode){
    el.varA = 'test'; 
  },
});

요소는 지침에서 각 라이프사이클 이벤트에 대한 인수로 전달되며, 사용자는 나중에 다음 위치에서 값에 액세스할 수 있다.el.varA.

이를 위한 두 가지 방법이 있는 것 같다.

1. github에 대한 이 의견에 따라 다음과 같은 상태 저장 명령을 정의할 수 있다.

   Vue.directive('my-directive', (() => {
       let varA = '';
       return {
           inserted: function(el, binding, vnode){
               varA = 'test'; 
           },
       };
   })());
   

2. Vue.js 문서에 있는 노트 상자에 따르면:

   후크를 통해 정보를 공유하려면 요소의 데이터 집합을 통해 공유하십시오.

   Vue.directive('my-directive', {
       inserted: function(el, binding, vnode){
           el.dataset.varA = 'test'; 
       },
   });
   

당신의this네가 생각하는 그런 게 아니야네가 한다면.console.log(this)네 능력 안에서, 너는 그것을 볼 수 있을 것이다.this창문이요

문서를 보면 '평범한 요소에 대한 낮은 수준의 DOM 접근만 필요한 경우'에 대한 지침이 나와 있다.그래서 지시사항에 대한 조항이 없다.지시사항이 아니라 구성요소가 필요한 것 같아.뭘 하려는 거야?당신은 지시문을 쓸 필요 없이 vue에서 먼 길을 갈 수 있다.

참조URL: https://stackoverflow.com/questions/45050066/how-to-declare-variables-in-custom-vuejs-directives