从组件的 <slot></slot> 内的组件调用方法

Question

我正在学习 Vue.js，我正在努力寻找一种方法来组织我的代码。我试图让一切尽可能模块化，所以在制作滑块时我做了以下操作：

<template>
    <div class="banners">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        methods: {
            echo() {
                console.log('Echoing..')
            }
        },
        mounted() {
            $('.banners').slick();
        }
    }
</script>

在我看来，我只是使用组件：

<banners>
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="echo">Echo</a>
    <?php endfor; ?>
</banners>

但是在我尝试调用echo之后，它会在父作用域而不是banners组件作用域中寻找它，并说方法未定义。

我想知道实现这一点的最佳方式。在父作用域内声明该方法对我来说是没有用的，因为在整个项目中我将有数百万个其他方法，这些方法与这种情况类似，如果我这样做，它将很快变得无组织。我想在自己的whatever中包含这些banner方法，以便我可以轻松地在它们应有的位置找到它们，以及除banner之外的其他模块。

也许我以错误的方式使用组件，不应该为此使用？我只是不能将 echo() 方法放在仅与该特定组件相关的父范围内。想象一下，也许我会在其他元素中添加其他 echo() 来做与横幅不同的事情。

我也不能移动模板内的 slot 内容，因为我需要通过 PHP 获取数据，这就是为什么我在 内做了 for槽.

Answer 1

也可以通过引用来引用父组件。

<banners ref="TheBanner">
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="$refs.TheBanner.echo()">Echo</a>
    <?php endfor; ?>
</banners>

Answer 2

在这种特殊情况下，您应该使用scoped slot。

在您的组件中传递您希望能够在插槽中使用的属性（在本例中为 echo 方法）。

<div class="banners">
    <slot :echo="echo"></slot>
</div>

在您的应用模板中，使用具有 scope 属性的模板标签将您注入到插槽中的内容包装起来。

<banners>
    <template slot-scope="props">
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="props.echo">Echo</a>
    <?php endfor; ?>
    </template>
</banners>

这是example。

如果您不需要使用传递给插槽的所有内容，或者只是为了避免每次都写入props.echo，您也可以解构作用域属性。

<banners>
    <template slot-scope="{echo}">
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="echo">Echo</a>
    <?php endfor; ?>
    </template>
</banners>