Как передать метод в область действия Vue.js

Question

Я использую область слота в vuejs.Работает отлично.Я могу передать в слот все, что захочу, например:

<slot :item1="item1">    
</slot>

Проблема в том, что когда я передаю функцию в качестве реквизита, она не определяется в родительском шаблоне.Так что это не работает:

<slot :my-method="myMethod">    
</slot>

В этом примере myMethod - это метод, определенный в дочернем компоненте vue.(Я использую машинопись, так что это метод класса компонента)

Любые идеи о том, как передать функцию, определенную в дочернем компоненте, через подпор слота в родительский, чтобы ее можно было вызывать извнутри кода слота у родителя?

Answer 1

UPDATE

Этот ответ написан для более старого синтаксиса pre v2.6 . С тех пор этот синтаксис был помечен как устаревший. Основные функциональные возможности остаются прежними, функции (методы) работают так же, как и свойства, которые связаны вверх (от дочернего к родительскому), однако в определении используется v-slot:default сейчас.

согласно обновленной документации (https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots),

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

Атрибуты, связанные с элементом, называются слот-реквизитами. Теперь в родительской области мы можем использовать v-slot со значением, чтобы определить имя для предоставленных нам реквизитов слота:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

Вот более сложный пример, как вы заметите, функция и выделенные слоты передаются с использованием slotProps

---

Оригинальный ответ с синтаксисом pre v2.6 . Пример того, как передать slot-scope

родитель:

<template>
  <div slot="item" slot-scope="{ myLink, myMethod }">
    <button @click="myMethod(myLink.title)">
      Bookmark
    </button>
  </div>
</template>

ребенок:

<template>
  <li v-for="myLink in links">
    <slot name="myLink" :myLink="myLink" :myMethod="myMethod"></slot>
  </li>
</template>

<script>
export default {
  methods: {
    myMethod(link) {
      link.bookmarked = true
    }
  }
}
</script>

есть недавнее сообщение Адама Уотана, в котором показано, как это работает на https://adamwathan.me/renderless-components-in-vuejs/