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

Call method from component inside component#39;s lt;slotgt;lt;/slotgt;(从组件的lt;slotgt;lt;/slotgt;内的组件调用方法)

问题描述

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

I'm learning Vue.js and I'm struggling to find a way to organize my code. I'm trying to make everything as modular as possible, so when making a slider i did the following:

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

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

And in my view I simply use the component:

<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组件作用域中寻找它，并说方法未定义.

But after I try to call echo, it looks for it in the parent scope, not in the banners component scope, and says the method is not defined.

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

I'd like to know the best way to implement this. It's useless for me to declare the method inside the parent scope because I will have millions of other methods throughout my project that that will be similar to this case, if I do that it will rapidly become unorganized. I want to have these banners methods inside their own whatever, so that I can easily find them all in their due place, as well as other modules aside from banners.

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

Maybe I'm using components the wrong way and should not be using for this? I just can't put an echo() method inside the parent scope for something that is only related to that particular component. Imagine that maybe I will have other echo() in other element that will do something different from the banner's one.

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

I also can't move the slot content inside the template because I need to get the data via PHP, that's why I did the for inside the slot.

推荐答案

在这种特殊情况下，您应该使用 作用域槽.

In this particular situation you should use a scoped slot.

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

In your component pass the properties that you want to be able to use in the slot (in this case the echo method).

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

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

In your app template, wrap the content you are injecting into the slot with a template tag that has the scope property.

<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，您也可以解构作用域属性.

You can also destructure the scoped properties if you don't need to use everything passed to the slot or just to avoid writing props.echo each time.

<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>

这篇关于从组件的<slot></slot>内的组件调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！