Vue で子コンポーネントに対してイベントを付与したい

Question

Vue で子コンポーネントに対し、イベントを付与するコンポーネントを作成しようとしているのですが、意図する動作をしません。
何か間違っているでしょうか？そもそもできないのでしょうか？

意図としては

• デザインだけを担当するコンポーネント
• 上記を利用し、それにイベントを付与するコンポーネント

を作り、デザインの再利用ができればいいなと思った次第です。

// タグとデザインだけを指定するコンポーネントの想定
Vue.component('my-button', {
  template: '<div class="button"><slot></slot></div>',
});

// 子コンポーネントに対しイベントを付与するコンポーネント
Vue.component('my-button2', {
  template: '<my-button v-on:click="alerting"><slot></slot></my-button>',
  methods: {
    alerting: function(){
      alert('hoge');
    }
  }
 });

var app = new Vue({
  el: '#app'
});

<div id="app">
  <my-button2>button</my-button2>
</div>

よろしくお願いいたします

Answer 1

一番下のコンポーネントが何も行わないなら

// タグとデザインだけを指定するコンポーネントの想定
Vue.component('my-button', {
  template: '<div class="button"><slot></slot></div>'
});

// 子コンポーネントに対しイベントを付与するコンポーネント
Vue.component('my-button2', {
  template: '<my-button v-on:click.native="alerting"><slot></slot></my-button>',
  methods: {
    alerting: function(){
      alert('hoge');
    }
  }
 });

.native 修飾子を使って my-button2 の元のイベントをハンドリングすることも出来ます。お試しください。

Comments

[issei126]

意図する動作をさせることができました！ありがとうございます！

Answer 2

公式ドキュメントを参考に、この方法でなら意図する動作をさせることができました。
子コンポーネントから親コンポーネントのイベントを発火させます
https://jp.vuejs.org/v2/guide/components.html#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88
より適切な実装方法があれば教えていただきたいです

// タグとデザインだけを指定するコンポーネントの想定
Vue.component('my-button', {
  template: '<div v-on:click="fireParentEvent" class="button"><slot></slot></div>',
  methods: {
    fireParentEvent: function(){
      this.$emit('click');
    }
  }
});

// 子コンポーネントに対しイベントを付与するコンポーネント
Vue.component('my-button2', {
  template: '<my-button v-on:click="alerting"><slot></slot></my-button>',
  methods: {
    alerting: function(){
      alert('hoge');
    }
  }
 });

// 子コンポーネントに対しイベントを付与するコンポーネントその2
Vue.component('my-button3', {
  template: '<my-button v-on:click="alerting2"><slot></slot></my-button>',
  methods: {
    alerting2: function(){
      alert('hoge2');
    }
  }
 });

var app = new Vue({
  el: '#app'
});

<div id="app">
  <my-button2>button2</my-button2>
  <my-button3>button3</my-button3>
</div>