Say I have a component Reusable with a method onClick that sets a data prop. I want this component to be reusable, and I want to use slots to override parts.
As I understand the canon, I must pass the onClick method as a scoped property up to parent from reusable:
<div class="reusable">
<h2>Reusable</h2>
<slot name="clicker" v-bind:onClick="onClick">
Default stuff <button v-on:click="onClick">Close</button>
</slot>
<p v-if="clicked">You clicked me</p>
</div>
<div class="parent">
<h1>Parent</h1>
<reusable>
<template slot="clicker" scope="reusable">
<button click="reusable.onClick">
Close from parent
</button>
</template>
</reusable>
</div>
This might get verbose and noisy if I have a lot of methods, and I wondered: is there a better way, or is this entirely cromulent?
I've looked at using refs, and having methods on the parent call this.$refs.reusable.onClick, as well as specifying dynamic components and swapping them out; both seem counterintuitive.