Vue.jsにおけるコンポーネントの継承について

Question

Vue.js初心者です。
Vue.jsで以下のことはできるでしょうか。

1. 与えられたデータをリスト表示するコンポーネントを作成。
   - リスト表示のテンプレートをこのコンポーネント内で記載
2. 1のコンポーネントを継承してクリックイベントのバインド処理を追加。

mixinというVueの機能でコンポーネントの継承はできるようなのですが
イベントバインディングはテンプレートに直接書き込んで行うようでした。
この場合だと、1で作成したコンポーネントの書き換える必要がでてきます。
1のコンポーネントのテンプレートを書き換えることなく、継承した2のコンポーネントの中で
クリック処理を追加したいのですが可能でしょうか。

よろしくお願いします。

Answer 1

$emitで親コンポーネントにイベントを通知し、親コンポーネントがそのイベントに対して処理をバインドすればいいのではないでしょうか？

イベントとメッセージを親コンポーネントに送出する

あまりきれいなコードではないですが、サンプルを作ってみました。
サンプル
listコンポーネントを使用する側でイベントをバインドしています。

Comments

[natsuna0219]

サンプルまで用意いただきありがとうございます！
参考にさせていただきます

Answer 2

$refs と $on を上手く使えば出来ると思いますが、どう考えてもあまり良くないパターンです。
素直に slot など使ったほうが良いのではないでしょうか。

Comments

[natsuna0219]

回答ありがとうございます。
以下のように実装する認識であっているでしょうか。

■ 1のコンポーネント（名前をParentListとします）のテンプレート
```
<template>
<ul>
<slot></slot>
</ul>
</template>
```

■ 2のコンポーネントのテンプレート
```
<template>
<ParentList><li v-for="(item) in items" v-on:click="onClick"></li>
</template>
```

[yhg]

そのような感じですね。 ちなみに 2 ではなく 1 のほうに items のデータを持たせたい場合は slot-scope 機能を使えば良いです。

[natsuna0219]

なるほど、理解できました。ありがとうございます！