vue.jsのカスタムコンポーネントからクリックイベントをバブルアップする方法はありますか？

Question

私はこのようになりますどのカスタムコンポーネント<item>を持っている：これは "こんにちは、世界" を出力します

<item :content="Hello world"></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 v-on:click="myClickEvent" :content="Hello world"></item> 

質問：<div>がクリックされたときに、<item>コンポーネントがクリックイベントを発生させるにはどうすればよいですか？

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を使用することです。