如何使vue.js中的自定义组件产生click事件？

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"/>

Answer 2

  <template>
    <div id="action-button">
      <input type="button" id="in" @click="clicked" :value="value" />    
    </div>
  </template>

  <script>
  export default {
    name: 'action-button',
    props: {
      'value': String
    },
    methods: {
      clicked () {
        this.$emit('action-button-clicked')
      }
    }
  }
  </script>

然后v-on:click你应该使用v-on:action-button-clicked="handleClick".

<action-button v-on:action-button-clicked="handleClick"></action-button>

所以一般的想法是在内部处理点击，然后emit在你的组件内部使用。