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

Question

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

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

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

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

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

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

Answer 1

这样做的方法是定义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 {
  data() {},
  methods: {
    myMethod(link) {
      link.bookmarked = true
    }
  }
}
</script>

Adam Wathan最近发表了一篇文章，展示了https://adamwathan.me/renderless-components-in-vuejs/

的工作原理

Answer 2

阅读this article时，我发现，如果您需要以编程方式（而不是从模板）调用方法，则实际上可以将方法从父组件传递到作用域插槽，但随后必须传递通过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()。 我希望这对其他人有帮助：）

Answer 3

根据所有答案，我试图在https://codesandbox.io/s/vuejs-v-slot-sample-z9r9c

上创建概念代码样本

我的观点是创建一个按钮组件，第二个使用插槽，第二个使用第二个组件，第一个按钮组件使用插槽功能，并与$emit功能连接在一起。

希望它有用。