vue.js - 如何从 vue.js 中的自定义组件冒泡点击事件？

Question

我有一个自定义组件 <item>看起来像这样:

item.vue

<script>
  export default {
    render: function (c) {
      var self = this;
      const contentEl = c('div', {staticClass:'item-content', domProps: {innerHTML: self.content}});
      return c('div', {
        staticClass: 'item',
        class: {
          'item-left': self.side === 'left',
          'item-right': self.side === 'right'
        }
      }, [contentEl])
    },
    props: {
      content: String,
    }
  }
</script>

可以这样使用:

<item :content="Hello world"></item>

这将打印“Hello world”并且工作正常，但现在我希望该项目像这样可点击:

<item v-on:click="myClickEvent" :content="Hello world"></item>

问题:

如何制作 <item>组件在其内部 <div> 时触发点击事件被点击了？

Answer 1

在子组件中:

<button @click="$emit('click')"></button>

然后在父组件中:

<MyButton @click="someFunction"/>