VueJ의 동적 구성 요소에 대한 사용자 지정 이벤트 프로그래밍 바인딩s

VueJ의 동적 구성 요소에 대한 사용자 지정 이벤트 프로그래밍 바인딩s

vuejs 앱에서 동적 구성 요소를 사용하는 방법은 다음과 같습니다.

<mycomponent>
  <component ref="compRef" :is="myComponent" v-bind="myComponentProps"></component>
  <div class="my-buttons">        
    <my-button label="Reset" @click="reset()"/>
  </div>
</mycomponent >

myComponent는 주입할 실제 컴포넌트를 유지하는 부모 컴포넌트상의 지주입니다. myComponentProps주입된 인스턴스(instance)의 포롭을 고정하는 지주이기도 합니다.

청취자를 구성 요소에 동적으로 바인딩하는 방법도 알고 싶습니다. 여러 이벤트가 있는 v-on에는 개체를 보낼 수 없습니다.

프로그램적으로 추가할까 생각 중이었는데 Vue 커스텀이벤트(예:addEventListener커스텀 이벤트에 상당)

어떤 팁이라도 주시면 감사하겠습니다!

Vue 2.2+에서는 다음과 같이 이벤트청취자를 프로그래밍 방식으로 추가할 수 있습니다.

new Vue({
  el: '#app',
  created() {
    const EVENTS = [
      {name: 'my-event1', callback: () => console.log('event1')},
      {name: 'my-event2', callback: () => console.log('event2')},
      {name: 'my-event3', callback: () => console.log('event3')}
    ]

    for (let e of EVENTS) {
      this.$on(e.name, e.callback); // Add event listeners
    }

    // You can also bind multiple events to one callback
    this.$on(['click', 'keyup'], e => { console.log('event', e) })
  }
})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div>
    <!-- v-on:EVENTNAME adds a listener for the event -->
    <button v-on:click="$emit('my-event1')">Raise event1</button>
    <button v-on:click="$emit('my-event2')">Raise event2</button>
    <button v-on:click="$emit('my-event3')">Raise event3</button>
  </div>
  <div>
    <!-- v-on shorthand: @EVENTNAME -->
    <button @click="$emit('my-event1')">Raise event1</button>
    <button @click="$emit('my-event2')">Raise event2</button>
    <button @click="$emit('my-event3')">Raise event3</button>
  </div>
</div>

Vue 2.6+에서는 템플릿에 이벤트청취자를 동적으로 추가할 수 있습니다.

new Vue({
  el: '#app',
  data: {
    eventname: 'click',
  },
  methods: {
    handler(e) {
      console.log('click', e.target.innerText)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <button @[eventname]="handler">Raise dynamic event</button>

  <!-- Set dynamic key to null to remove event listener -->
  <button @click="eventname = null">Unbind event</button>
</div>

여러 이벤트 리스너를 선언적으로 바인드할 수도 있습니다.v-on="{event1: callback, event2: callback, ...}":

new Vue({
  el: '#app',
  methods: {
    onClick() { console.log('click') },
    onKeyUp(e) { console.log('keyup', e.keyCode) }
  }
})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
</div>

언급URL : https://stackoverflow.com/questions/48250832/programmatically-bind-custom-events-for-dynamic-components-in-vuejs