从组件的 内部调用方法

我正在学习 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 组件作用域中查找，并表示该方法未定义。

我想知道实现这一点的最佳方法。对我来说，在父作用域内声明该方法是没有用的，因为我的整个项目中将有数百万个其他方法，这些方法与本例类似，如果我这样做，它将很快变得无组织。我希望将这些横幅方法放在自己的无论如何中，以便我可以轻松地在适当的位置找到它们，以及横幅之外的其他模块。

也许我使用组件的方式错误，不应该用于此目的？我只是无法将 echo() 方法放入父作用域内，以获取仅与该特定组件相关的内容。想象一下，也许我会在其他元素中使用其他 echo() 来执行与横幅不同的操作。

我也无法移动模板内的 slot 内容，因为我需要通过 PHP 获取数据，这就是我在 slot 内执行 for 的原因我>.

在这种特殊情况下，您应该使用作用域槽 https://v2.vuejs.org/v2/guide/components.html#Scoped-Slots.

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

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

在您的应用程序模板中，使用具有 range 属性的模板标记将要注入到槽中的内容包装起来。

<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 https://codepen.io/Kradek/pen/PmxVMQ?editors=1010.

如果您不需要使用传递给插槽的所有内容或者只是为了避免写入，您还可以解构作用域属性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>