Я использую функцию render
в Vue:
export default {
name: 'TButton',
render (h) {
return h('button', { 'class': { btn: true } }, this.$slots.default)
}
}
По какой-то причине он не работает с директивой Vue v-on:click
:
t-button.white(@click="alert()") Send // PUG template
Хотя это работает:
span(@click="alert()")
t-button.white Send // PUG template
Хотя это явно не рассматривается в документах, насколько я вижу, события автоматически не привязаны к функционально отображаемым компонентам.
Один из вариантов - вручную передать все слушатели по умолчанию в объект данных.
Vue.component('sample', {
render: function(createElement) {
return createElement('button', {
on: this.$listeners
}, this.$slots.default)
}
})
new Vue({
el: '#app',
methods: {
foo() {
console.log('foo called')
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<sample v-on:click="foo()">bar</sample>
</div>