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

Question

假设我有一个组件 Reusable，其方法 onClick 设置了一个数据属性。我希望这个组件是可重用的，我想使用插槽来覆盖部分。

据我所知，我必须将 onClick 方法作为作用域属性传递给 reusable 中的 parent:

<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

您可以使用对象表示法绑定(bind)插槽的属性:

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

Here's a working fiddle.

---

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

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

data() {
  return {
    scopeProps: {
      onClick: this.onClick,
      onInput: this.onInput,
      onCustom: this.onCustom
    }
  }
}