Есть 3 варианта:
1) Через $emit('click')
Добавьте в
<button class="btn" type="button">
<slot></slot>
</button>
@click="$emit('click')", чтобы вышло так:
<button class="btn" type="button" @click="$emit('click')">
<slot></slot>
</button>
Теперь можно передавать слушать событие так:
<v-button post-title="hello" class='button' @click="methodClick">
</v-button>
2) модификатор .native
Можно легко слушать события корневого элемента компонента через модификатор .native
3) Продвинутый способ v-on="$listeners"
Через v-on
можно ставить слушателей которые в объекте. $listeners это список слушателей которые запрашиваются у компонента. То есть, те слушатели которые ставятся компоненту автоматически ставятся на элемент у которого v-on="$listeners"
. Vue замечателен 😊
Все 3 варианта:
var component1 = {
template: `<button class="btn" type="button" @click="$emit('click')">
<slot></slot>
</button>`
}
var component2 = {
template: `<button class="btn" type="button">
<slot></slot>
</button>`
}
var component3 = {
template: `<button class="btn" type="button" v-on="$listeners">
<slot></slot>
</button>`
}
var app = new Vue({
el: '#app',
components: { component1, component2, component3 },
data: () => ({
count: 0
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app" style="height: 1000px; background: yellow;">
Вы нажали но кнопки: {{ count }} раз <br>
<component1 @click="count++">
Вариант 1
</component1>
<component2 @click.native="count++">
Вариант 2
</component2>
<component3 @click="count++">
Вариант 3
</component3>
</div>