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

  <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。

Answer 2

在子组件中，您可以按照@nathan的说明进行操作。

<button @click="$emit('click', $event)">My button component</button>

希望对您有帮助

Answer 3

在子组件中：<button @click="$emit('click')"></button>

然后在父组件中：<MyButton @click="someFunction"/>

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

3 个答案: