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

发布于11月24日

我有一个定制组件<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>

Question:如何使<item>组件在其内部<div>被单击时触发单击事件？

推荐答案

  <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:action-button-clicked="handleClick"代替v-on:click.

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

所以一般的 idea 是在内部处理点击，然后在组件内部使用emit次.