从组件内部的<slot></slot>组件调用方法 [英] Call method from component inside component's <slot></slot>
问题描述
我正在学习 Vue.js，并且正在努力寻找组织代码的方法.我试图让一切都尽可能模块化，所以在制作滑块时，我做了以下事情:
<div class="banners"><插槽></插槽></模板><脚本>导出默认{方法: {回声(){console.log('回声..')}},安装(){$('.banners').slick();}}
在我看来，我只是使用组件:
<?php for ($i = 0; $i < 5; $i++) : ?><img src="http://lorempixel.com/1440/500";alt=横幅图片"class =横幅"><a href="#";v-on:click="echo">Echo</a><?php endfor;?></横幅> 但是在我尝试调用 echo 之后，它在父作用域中查找它，而不是在 banners 组件作用域中，并说该方法未定义.
我想知道实现此目的的最佳方法.在父作用域内声明方法对我来说毫无用处，因为在我的项目中将有数百万个其他方法，这些方法与这种情况类似，如果我这样做，它会很快变得无组织.我希望将这些横幅方法放在它们自己的 whatever 中，以便我可以轻松地在适当的位置找到它们，以及横幅之外的其他模块.
也许我以错误的方式使用组件，不应该为此使用?我只是不能将 echo() 方法放在父范围内，用于仅与该特定组件相关的内容.想象一下，也许我会在其他元素中使用其他 echo() 来做一些与横幅不同的事情.
我也无法移动模板中的 slot 内容，因为我需要通过 PHP 获取数据，这就是为什么我在 中做了 for插槽.
在这种特殊情况下，您应该使用 作用域槽.
在您的组件中传递您希望能够在插槽中使用的属性(在本例中为 echo 方法).
在您的应用模板中，使用具有 scope 属性的模板标记将您要注入插槽的内容包装起来.
<template slot-scope="props"><?php for ($i = 0; $i < 5; $i++) : ?><img src="http://lorempixel.com/1440/500" alt="横幅图片" class="横幅"><a href="#" v-on:click="props.echo">Echo</a><?php endfor;?></模板></横幅> 这是一个示例.
如果您不需要使用传递给插槽的所有内容，或者只是为了避免每次都编写 props.echo，您也可以解构作用域属性.
<template slot-scope="{echo}"><?php for ($i = 0; $i < 5; $i++) : ?><img src="http://lorempixel.com/1440/500" alt="横幅图片" class="横幅"><a href="#" v-on:click="echo">Echo</a><?php endfor;?></模板></横幅> 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>
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.
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.
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.
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.
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>
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>
Here is an example.
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>组件调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
