Question

您将如何侦听动态创建的组件实例发出的事件？

在示例中，最上面的组件被添加到DOM中，而第二个组件是用javascript动态创建的。

y = 2
    Do While ThisWorkbook.Sheets("StarsID").Range("A" & y).Value <> ""
    IE.document.getElementById("caseId").Value = ThisWorkbook.Sheets("StarsID").Range("A" & y).Value
    IE.document.getElementById("_eventId_search").Click
    Do While IE.Busy = True Or IE.readyState <> 4: DoEvents: Loop
    currentQueue = IE.document.getElementById("results").Children(1).Children(0).Children(3).Children(0).innerText
    ThisWorkbook.Sheets("StarsID").Cells(y, 3).Value = currentQueue
    ActiveCell.Offset(1, 0).Select
    y = y + 1
    Loop

Vue.component("button-counter", {
  data: function() {
    return {
      count: this.initial_count
    }
  },
  props: ['initial_count'],
  methods: {
    add: function() {
      this.count++
        this.$emit('myevent', this.count)
    }
  },
  template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
})

let app = new Vue({
  el: "#app",
  data() {
    return {
      initial_count: 10,
    }
  },
  mounted: function() {
    let initial_count = this.initial_count

    let ButtonCounterComponentClass = Vue.extend({
      data: function() {
        return {}
      },
      render(h) {
        return h("button-counter", {
          props: {
            initial_count: initial_count
          }
        })
      }
    })
    let button_counter_instance = new ButtonCounterComponentClass()
    button_counter_instance.$mount()
    button_counter_instance.$on('myevent', function(count) {
      console.log('listened!')
      this.say(count)
    })
    this.$refs.container.appendChild(button_counter_instance.$el)
  },
  methods: {
    say: function(message) {
      alert(message)
    }
  }
})

Answer 1

如果我已经了解了您想要的内容，那么您只需要在内部组件上监听事件并将其传递即可。

我在几个地方使用了箭头功能，以避免this绑定出现问题。否则，我会尽量保持您的代码不变。标记为****的更改。

Vue.component("button-counter", {
  data: function() {
    return {
      count: this.initial_count
    }
  },
  props: ['initial_count'],
  methods: {
    add: function() {
      this.count++
        this.$emit('myevent', this.count)
    }
  },
  template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
})

let app = new Vue({
  el: "#app",
  data() {
    return {
      initial_count: 10,
    }
  },
  mounted: function() {
    let initial_count = this.initial_count

    let ButtonCounterComponentClass = Vue.extend({
      data: function() {
        return {}
      },
      render(h) {
        return h("button-counter", {
          props: {
            initial_count: initial_count
          },
          // **** Added this ****
          on: {
            myevent: count => {
              this.$emit('myevent', count);
            }
          }
          // ****
        })
      }
    })
    let button_counter_instance = new ButtonCounterComponentClass()
    button_counter_instance.$mount()
    // **** Changed the next line ****
    button_counter_instance.$on('myevent', count => {
      console.log('listened!')
      this.say(count)
    })
    this.$refs.container.appendChild(button_counter_instance.$el)
  },
  methods: {
    say: function(message) {
      alert(message)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id="app">
    <button-counter initial_count=20 v-on:myevent="say"></button-counter>
    <div ref='container'></div>
</div>

重要的是要了解button_counter_instance不是button-counter组件的实例。您已将其包装在另一个组件中，尽管该组件没有添加任何额外的DOM节点。因此，在包装器组件上进行监听与在button-counter上进行监听不同。

您可以传递给h的文档：https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

侦听来自动态Vue组件的事件

1 个答案: