可重用组件访问父槽中的子方法

Question

假设我有一个带有设置 data prop 的Reusable方法的组件。onClick我希望这个组件可以重用，并且我想使用插槽来覆盖部件。

据我了解，我必须将该onClick方法作为作用域属性传递到parentfrom 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>

如果我有很多方法，这可能会变得冗长和嘈杂，并且我想知道：是否有更好的方法，或者这完全是 cromulent 吗？

我研究过使用 refs，在父调用上使用方法this.$refs.reusable.onClick，以及指定动态组件并将它们交换出来；两者似乎都违反直觉。

Answer 1

您可以使用对象表示法绑定插槽的属性：

<slot name="clicker" v-bind="{ onClick, onInput, onCustom }">
    Default stuff <button v-on:click="onClick">Close</button>
</slot>

这是一个工作小提琴。

如果这变得太冗长，您至少可以将对象定义移动到数据属性并将其从模板中取出：

<slot name="clicker" v-bind="scopeProps">
    Default stuff <button v-on:click="onClick">Close</button>
</slot>

<slot name="clicker" v-bind="{ onClick, onInput, onCustom }">
    Default stuff <button v-on:click="onClick">Close</button>
</slot>