Vue.js
이벤트

이벤트 구문

이벤트 보내기 : vm.$emit('new-message');

이벤트를 잡으려면 : vm.$on('new-message');

: 모든 구성 요소까지 이벤트를 보내려면 vm.$broadcast('new-message');

최대 모든 구성 요소에 이벤트를 보내려면 vm.$dispatch('new-message');

참고 : $broadcast 및 $dispatch 는 Vue2에서 더 이상 사용되지 않습니다. ( Vue2 기능 참조 )

이벤트는 언제 사용해야합니까?

다음 그림은 구성 요소 통신이 작동하는 방법을 보여줍니다. 그림은 Evan You 의 Progressive Framework 슬라이드 (VueJS 개발자)에서 가져온 것입니다.

작동 방식의 예는 다음과 같습니다.

데모

HTML

<script type="x-template" id="message-box">
    <input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
 
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>

JS

var messageBox = {
  template: '#message-box',
  props: ['msg']
};
 
new Vue({
  el: 'body',
  data: {
    message: ''
  },
  methods: {
    updateMessage: function(msg) {
      this.message = msg;
    }
  },
  components: {
    'message-box': messageBox
  }
});

위의 예를 향상시킬 수 있습니다!

위의 예는 구성 요소 통신이 작동하는 방법을 보여줍니다. 그러나 사용자 정의 입력 구성 요소의 경우 부모 변수를 입력 된 값과 동기화하기 위해 v-model 사용해야 v-model .

데모 Vue1

데모 Vue2

Vue1에서는 <message-box> 구성 요소로 보내지는 prop에서 .sync 를 사용해야합니다. 이렇게하면 VueJS가 하위 구성 요소의 값을 상위 구성 요소와 동기화하도록 지시합니다.

주의 사항 : 모든 구성 요소 인스턴스에는 자체 격리 된 범위가 있습니다.

HTML Vue1

<script type="x-template" id="message-box">
  <input v-model="value" />
</script>

<div id="app">
  <message-box :value.sync="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

Vue2에서 특별한 존재 'input' 을 수행 할 수 있습니다 이벤트 $emit . 이 이벤트를 사용하면 v-model <message-box> 구성 요소에 직접 배치 할 수 있습니다. 예제는 다음과 같습니다.

HTML Vue2

<script type="x-template" id="message-box">
  <input :value="value" @input="$emit('input', $event.target.value)" />
</script>

<div id="app">
  <message-box v-model="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

JS Vue 1 & 2

var messageBox = {
  template: '#message-box',
  props: ['value']
};

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {
    'message-box': messageBox
  }
});

입력이 얼마나 빨리 업데이트되는지 주목하십시오.

$ dispatch 및 $ broadcast의 비추천을 어떻게 처리합니까? (버스 이벤트 패턴)

$emit 은 이벤트를 내보내는 구성 요소에 범위가 있음을 $emit 입니다. 이는 구성 요소 트리에서 서로 멀리있는 구성 요소간에 통신하려는 경우 문제입니다.

참고 : Vue1에서는 $dispatch 또는 $broadcast 를 사용하지만 Vue2에서는 사용하지 않습니다. 그게 잘 확장되지 않는 이유. 이를 관리하기위한 인기있는 bus 패턴이 있습니다.

데모

HTML

<script type="x-template" id="sender">
  <button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
 
<script type="x-template" id="receiver">
  <div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
 
<sender></sender>
<receiver></receiver>

JS

var bus = new Vue();
 
var senderComponent = {
  template: '#sender',
  data() {
    return {
      bus: bus
    }
  }
};
 
var receiverComponent = {
  template: '#receiver',
  data() {
    return {
      numberOfEvents: 0
    }
  },
  ready() {
    var self = this;
 
    bus.$on('new-event', function() {
      ++self.numberOfEvents;
    });
  }
};
 
new Vue({
  el: 'body',
  components: {
    'sender': senderComponent,
    'receiver': receiverComponent
  }
});

어떤 Vue() 인스턴스도 이벤트를 $emit 하고 catch ( $on ) 할 수 있다는 것을 알아야합니다. 전역 Vue 인스턴스 호출 bus 선언하기 만하면이 변수가있는 모든 구성 요소가 이벤트를 내보내고 잡을 수 있습니다. 구성 요소가 bus 변수에 액세스 할 수 있는지 확인하십시오.