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

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

this.$emit('nextslide');

在我的父组件中，我尝试捕捉如下事件：

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

        this.$slots.default,
    )
},

我没有收到任何错误，但它也不工作。我想知道你们是否真的能抓住这样的事件

页面：

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

SlideNext.vue

<script>
    export default {

        render(createElement) {
            return createElement(
                'div',
                {
                    on: {
                        click: this.clickHandler
                    },

                },
                'Next')
        },

        methods: {

          clickHandler() {
              this.$emit('nextslide');
              console.log('trigger emit');
          },

        },

    }
</script>

导出默认值{
渲染（createElement）{
返回createElement(
"div",，
{
关于：{
单击：this.clickHandler
},
},
“下一步”）
},
方法：{
clickHandler（）{
此.$emit（'nextslide'）；
log（'trigger emit'）；
},
},
}

您正在

元素而不是组件上注册侦听器。与本机DOM事件不同，组件事件不会冒泡，因此您只能直接在子组件vnode上注册

nextslide

事件，而不能注册祖先事件

---

从您的示例中，我看不出父组件和子组件之间的关系是什么–您的父组件没有直接呈现子组件（除非它位于默认插槽中）。

您在

元素而不是组件上注册侦听器。与本机DOM事件不同，组件事件不会冒泡，因此您只能直接在子组件vnode上注册

nextslide

事件，而不能注册祖先事件

从您的示例中，我看不出父组件和子组件之间的关系是什么–您的父组件没有直接呈现子组件（除非它位于默认插槽中）

因此，您希望在父组件中侦听在子组件中创建的事件。请查看以下内容：

子组件：

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

父组件：

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

新Vue({
el:“应用程序”，
})

因此，您希望在父组件中侦听在子组件中创建的事件。请查看以下内容：

子组件：

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

父组件：

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

新Vue({
el:“应用程序”，
})

Ah有道理。。。是，我的子组件位于默认插槽中。我不清楚“因此您只能直接在子组件vnode上注册nextslide事件”我是否必须将

triggerFunction

移动到我的子组件？我的意思是您只能为子组件（无论是什么）拥有

{on:{nextslide:this.triggerFunction}

位而不是一个

'div'

。我用组件编辑了我的问题，你介意看一看并帮助我如何做到这一点吗？啊，这很有意义。。。是，我的子组件位于默认插槽中。我不清楚“因此您只能直接在子组件vnode上注册nextslide事件”我是否必须将

triggerFunction

移动到我的子组件？我的意思是您只能为子组件（无论是什么）拥有

{on:{nextslide:this.triggerFunction}

位而不是一个

'div'

。我用组件编辑了我的问题，你介意看看并帮助我如何实现这一点吗？这很有效！但是我如何返回更多的子组件呢？我回答你的问题，你必须了解这一点，我想。无论如何，你可以看看这里的另一个问题：我真的很感激。很高兴帮助你完成这项工作！但是我如何返回更多的子组件呢？我回答你的问题，你必须了解这一点，我想。无论如何，你可以看看这里的其他问题：我真的很感激。很高兴帮助你