如何在 Vue.js 插槽作用域中传递方法

Question

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

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

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

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

在此示例中，myMethod 是在子 vue 组件上定义的方法。 （我使用的是打字稿，所以它是组件类上的一个方法）

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

原文由 user3413723 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

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

根据更新的文档（ https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots ），

>  <span>
>   <slot v-bind:user="user">
>     {{ user.lastName }}
>   </slot>
> </span>
>
> ```
>
> 绑定到元素的属性称为 slot props。现在，在父作用域中，我们可以使用带有值的 v-slot 来为我们提供的插槽道具定义名称：
>
> ```
>  <current-user>
>   <template v-slot:default="slotProps">
>     {{ slotProps.user.firstName }}
>   </template>
> </current-user>
>
> ```

这是一个更复杂的示例，您会注意到，函数和作用域插槽是使用 `slotProps` 传递的

[![编辑 Vue 模板](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-3eczr?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue)

* * *

使用 **v2.6 之前** 语法的原始答案。如何传递 `slot-scope` 的示例

父母：

孩子：

”`

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

这就是我使用它的方式：

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

 <template>
    <cart-validation>
        <template v-slot:trigger="{ myMethod }">
            <!-- here you pass the method as a prop -->
            <cart :my-method="myMethod">
            </cart>
        </template>
    </cart-validation>
</template>

父组件（CartValidation.vue）

 <template>
    <div>
        <slot name="trigger" :my-method="myMethod" />
    </div>
</template>
<script>
    export default {
        name: 'CartValidation',
        methods: {
            myMethod() {
                // here you define your method
                console.log('hello!');
            }
        },
    };
</script>

子组件（Cart.vue）

 <script>
    export default {
        name: 'Cart',
        props: ['myMethod'],
        mounted() {
            // here you call the method
            this.myMethod();
        }
    };
</script>

在我的代码的其他部分，我在插槽内使用了其他元素，但在每个子组件中，我可以调用 this.myMethod() 。我希望这对其他人有帮助 :)

原文由 Giorgio Tempesta 发布，翻译遵循 CC BY-SA 4.0 许可协议