时间戳

首页 > 解决方案 > 监听来自动态 Vue 组件的事件

vue.js - 监听来自动态 Vue 组件的事件

问题描述

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

在示例中，顶部组件添加到 DOM 中，而第二个组件是在 javascript 中动态创建的。

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)
    }
  }
})
<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>

标签： vue.jsdynamicvuejs2vue-component

解决方案

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

我在几个地方使用了箭头函数来避免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 节点。所以监听 wrapper 组件与监听button-counter.

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

推荐阅读