Question

在我的子组件中，我有一个自定义点击处理程序，它会发出如下事件：

ui->tableWidget->edit(ui->tableWidget->currentIndex());

在我的父组件中，我尝试捕捉这样的事件：

this.$emit('nextslide');

我没有任何错误，但它也无法正常工作。我想知道你是否真的可以抓住这样的事件。

页面：

render(createElement) {
    return createElement(
        'div',
        {
            on: {
                nextslide: this.triggerFunction,
            }
        },

        this.$slots.default,
    )
},

<carousel> <slide-next> </slide-next> </carousel>：

Carousel.vue

<script> export default { render(createElement) { return createElement( 'div', { on: { nextslide: this.triggerFunction, } }, this.$slots.default, ) }, methods: { triggerFunction() { console.log('this should trigger'); }, } } </script>

SlideNext.vue

Answer 1

所以你想在父组件中听取在子组件中创建的事件。看看这里：See it in action

子组件：

Vue.component('child-component', {
    data: function() {
    return {
        text: 'hi i am a text from child component'
    }
  },
  render(h) {
    return h('div', {
        class: ['text'],
      on: {
        click: this.clicked
      }
    },
    ['Click me,please']
    )
  },
  methods: {
    clicked() {
        this.$emit('click', this.text)
    }
  }
})

父组件：

Vue.component('parent-component', {
    render (h) {
    return h('child-component', {
        on: {
        click: this.clicked
      }
    })
  },
  methods: {
    clicked(data_passed_from_child) {
        alert(`From child passed: ${data_passed_from_child}`)
    }
  }
})

最后要让它发挥作用：

<div id="app">
  <parent-component></parent-component>
</div>

new Vue({
  el: "#app",
})

v节点数据对象中的自定义事件处理程序

1 个答案: