如何在Vue.js插槽范围中传递方法

我正在vuejs中使用插槽作用域。它工作得很好。我可以像这样将任何我想要的东西传递到插槽中：

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

问题是，当我将函数作为道具传递时，它在父模板中是未定义的。所以这不起作用：

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

在本例中，myMethod是在子vue组件上定义的方法。（我使用的是typescript，因此它是组件类上的一个方法）

关于如何通过插槽道具将子组件上定义的函数传递回父组件，以便可以从父组件的插槽代码中调用该函数，有何想法？

UPDATE 这个答案是为旧的v2.6之前的语法编写的。从那时起，这种语法就被标记为不推荐使用。核心功能保持不变，函数（方法）的工作方式与向上绑定的属性（从子级到父级）的工作方式相同，但是定义现在使用了

v-slot:default

根据更新的文件（）

儿童：

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

导出默认值{
方法：{
myMethod（链接）{
link.bookmarked=true
}
}
}

阅读我发现，如果您需要以编程方式（而不是从模板）调用一个方法，您实际上可以将一个方法从父组件传递到作用域插槽，但随后您必须通过一个道具将相同的方法传递给子组件：这样您就可以访问该方法，并可以从代码中调用它

我就是这样使用它的：

用法（在html、blade或其他vue组件中）

父组件（CartValidation.vue）

导出默认值{
名称：'CartValidation'，
方法：{
myMethod（）{
//在这里定义您的方法
console.log（'hello！'）；
}
},
};

子组件（Cart.vue）

导出默认值{
名称：'购物车'，
道具：['myMethod']，
安装的（）{
//在这里你调用这个方法
这个.myMethod（）；
}
};

在代码的其他部分中，我在插槽中使用了其他元素，但在每个子组件中，我都可以调用

this.myMethod（）

。

---

我希望这对其他人有所帮助：）

基于所有答案，我试图在这里创建一个概念教授代码示例

我的重点是创建一个按钮组件，一个是使用插槽创建的，另一个是使用第一个按钮组件的插槽功能创建的，最后一个是使用第二个组件创建的，并与

$emit

功能一起连接

---

希望它有用。

效果很好！我意识到的问题是我把大写字母弄乱了，所以当我将它们作为属性传递时，它们是未定义的。请注意，

插槽范围在Vue 2.6.x版本中已被弃用（请参见），因此请使用您可以在此处找到的新推荐语法
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

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