gpt4 book ai didi

javascript - 从组件 内部的组件调用方法

转载 作者:搜寻专家 更新时间:2023-10-30 22:14:33 27 4
gpt4 key购买 nike

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

<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 中,这样我就可以轻松地在适当的位置找到它们,以及除了横幅之外的其他模块。

也许我使用组件的方式不对,不应该用于此目的?我只是不能将 echo() 方法放在父范围内,以获取仅与该特定组件相关的内容。想象一下,也许我会在其他元素中使用其他 echo() 来做一些与横幅不同的事情。

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

最佳答案

在这种特殊情况下,您应该使用 scoped slot .

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

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

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

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

关于javascript - 从组件 <slot></slot> 内部的组件调用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44103424/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com