Reusable component access child method in parent slot

Viewed 1761

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.

2 Answers
Related