I am looking to create a series of wrapper components whose main purpose is to have a specific style and contain passed children or props.
One of the wrapper components I have is:
// components/FancyButton.vue
<template>
<button class="fancy-button">
<slot />
</button>
</template>
How can I pass "v-" props to the <button> element so that it can handle click events?
// components/App.vue
<template>
<FancyButton v-on:click="doSomething()"> <!-- props are not being applied -->
Some children
</FancyButton>
</template>
<script>
import FancyButton from './FancyButton'
export default {
components: {
FancyButton
}
}
</script>