从组件的<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之后,它会在父作用域中查找它,而不是在横幅组件作用域中查找它,并且表示该方法未定义.

我想知道实现这个的最佳方法.对我来说,在父作用域内声明方法是没用的,因为我将在整个项目中有数百万个其他类似于这种情况的方法,如果我这样做,它将很快变得无组织.我希望在他们自己的内容中使用这些横幅方法,这样我就可以轻松找到它们的所有位置,以及除横幅之外的其他模块.

也许我正在以错误的方式使用组件而不应该使用它？我只是不能在父作用域内放置一个echo()方法,仅用于与该特定组件相关的内容.想象一下,也许我会在其他元素中有其他的echo(),它会做一些不同于横幅的东西.

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

谢谢您的帮助!

Answer 1

在这种特殊情况下,您应该使用范围内的插槽.

在组件中传递您希望能够在插槽中使用的属性(在本例中为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>

这是一个例子.

如果您不需要使用传递给插槽的所有内容,或者只是为了避免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>