Passing through events and props to/from a root element - vue.js

Question

I'm trying to create a re-usable button. Is there any way to pass props and events down to the button itself without having to account for all the different possibilities?
For example, if I set a type on the <new-button> component, it passes the type to the <button> without me having to add a 'type' prop to the <new-button> component? Same goes for events, can a click event trigger from the button itself?
The component template itself is fairly simple and the button is the root component:
<template>
<button :disabled="submitting">
<i class="fa fa-spinner fa-spin" v-show="submitting"></i>
<i v-if="icon" :class="icon" v-show="!submitting"></i>
<slot></slot>
</button>
</template>
I do know that the class attribute passes through, but I don't see any way of passing through anything else.

Answer 1

How to pass all props down
If you want to pass all props down to an element without having to specify each of the props in particular, the way to achieve it is to pass the $props object (containing all the props passed to the component) using v-bind.
parent:
<custom-button :prop1="alice" :prop2="has" :prop3="a" :prop4="cat">
child:
<button v-bind="$props">
export default {
props: ['prop1', 'prop2', 'prop3', 'prop4']
}
How to prevent declaring all props
As you see, we still have to declare all the props in the props option of the component though. Luckily there's a workaround for that. Let's just pass an object of props:
parent:
<custom-button :props="{ prop1, prop2, prop3, prop4 }">
child:
<button v-bind="props">
export default {
props: ['props']
}
How to listen to native events
Finally for emitting events, you can register listeners for native Javascript events, such as click or input which bubble from HTML elements.
parent:
<custom-button #click.native="doStuff">
child:
<button>