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

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

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

<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
    }
  }
}

Answer 2

假设我们有 2 个组件，分别名为 reusable 和 parent。

reusable.vue：

<template>
  <div class="reusable">
      <h2>Reusable</h2>
      <slot name="clicker">
          Default stuff <button v-on:click="handleClick">Close</button>
      </slot>
      <p v-if="clicked">You clicked me</p>
  </div>
</template>

<script>
export default {
  params: {
    onClick: {
      type: Function,
      default() {}
    }
  }
  
  methods: {
    handleClick() {
      // default codes to execute goes here
      // then call onClick() callback
      this.onClick();
    }
  }
}
</script>

parent.vue

<template>
  <div class="parent">
      <h1>Parent</h1>
      <reusable :on-click="onClickHandler">
          <template slot="clicker">
              // other codes for injecting to slot
          </template>
      </reusable>
  </div>
</template>

<script>
import reusable from './path/to/reusable.vue';

export default {
  components: { reusable },
  
  methods: {
    onClickHandler() {
      // stuff to be run when button in 'reusable' got clicked
    }
  }
}
</script>

这是您的用例的一种可能解决方案。