我在vuejs中使用插槽范围.它工作得很好.我可以像这样把任何我想要的东西放进投币口:
<slot :item1="item1">
</slot>
问题是，当我将函数作为props 传递时，它在父模板中是未定义的.所以这不起作用:
<slot :my-method="myMethod">
</slot>
在本例中，myMethod是在子vue组件上定义的方法.(我使用的是typescript，所以它是组件类上的一个方法)
关于如何通过插槽props 将子组件上定义的函数传递回父组件，以便可以从父组件的插槽代码中调用它，有什么 idea 吗？
这个答案是为旧的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>绑定到元素的属性称为槽props .现在，在父范围中，我们可以使用v-slot和一个值来定义我们提供的slotprops 的名称:
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
Here is a more complicated example, as you will notice, the function and the scoped slots are passed using 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>