Vue 지침 내에서 방법을 정의하는 방법은 무엇입니까?

Vue 지침 내에서 방법을 정의하는 방법은 무엇입니까?

디렉티브가 있는데 디렉티브 안에 로컬 메서드를 생성하여 훅 기능에 사용하고 싶었습니다.제 코드는 다음과 같습니다.

export const OutsideClick = {
  bind (el, binding, vnode) {
    console.log(new Vue());
    // call method1()
  },
  componentUpdated(el, binding, vnode) {
    console.log('updated comp', binding);
    if(binding.value[1]()) {
      // call method1();
    }
  },
  unbind(el, binding, vnode) { 
    console.log('unbinding');
  }
}

이 시점에서 명령어 내에서 함수를 정의하고 명령어 내에서 사용하는 방법bind그리고.componentUpdated?

지시문 자체에 메서드를 추가할 수 없다고 생각합니다.단, 명령어 외부에서 메서드를 선언하고 명령어 내부에서 메서드를 호출할 수 있습니다.

function method1 (el, binding, vnode) {
 ...
}

export const OutsideClick = {
 bind (el, binding, vnode) {
  console.log(new Vue());
  method1(el, binding, vnode)
 },
 componentUpdated(el, binding, vnode) 
 {
  console.log('updated comp', binding);
  if(binding.value[1]()) {
   method1(el, binding, vnode)
  }
 },
 unbind(el, binding, vnode) { 
  console.log('unbinding')
  method1(el, binding, vnode)
 }
}

다음 예시와 같이 명령어 외부에 함수를 추가하고 라이프 사이클 메서드 내에서 호출해야 합니다.

Vue.directive("color", {

  "bind": function() {
    console.log("directive active");
    hello();
  },


  "unbind": function() {
    console.log("directive deactive");
  },


  "update": function(newValue, oldValue) {
    var el = $(this.el); 


    if (this.arg == 'background')
      el.css('background', newValue);
    else
      el.css('color', newValue);
  },
});

function hello() {
  console.log('hello');
}

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="app">
  <h2>Color</h2>
  <select v-model="color">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#000" selected>Black</option>
  </select>
  <br><br>
  <div v-color="color">
    Hello world!!!
  </div>
  <h2>Background</h2>
  <select v-model="color2">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#000" selected>Black</option>
  </select>
  <br><br>
  <div v-color:background="color2">
    Hello world!!!
  </div>

</div>

누군가 도움이 될 거야요령은 디렉티브를 컨스트럭터 함수로 랩하는 것입니다.

function myDirective() {
  this.myMethod = function() {
    console.log('My method')
  }
  return {
    bind: function(el) {
      el.addEventListener('click', this.myMethod)
    }.bind(this),
    update: function() {
      this.myMethod()
    }.bind(this),
    unbind: function(el) {
      el.removeEventListener('click', this.method)
    }.bind()
  }
}

Vue.directive('myDirective', new myDirective())
new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-my-directive>Just a button</button>
</div>

와도 기능합니다..bind(this)람다로 대체할 수 있다() => {}.

언급URL : https://stackoverflow.com/questions/55157157/how-to-define-a-method-inside-the-vue-directive