我在学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>
但在我try 调用echo后，它会在父范围中查找它，而不是在横幅组件范围中，并表示该方法未定义.
我想知道实现这一点的最佳方式.对我来说，在父范围内声明方法是无用的，因为在整个项目中，我将有数百万个类似于这种情况的其他方法，如果我这样做，它将迅速变得无组织.我想把这些横幅方法放在它们自己的中，不管是什么，这样我就可以很容易地在它们的适当位置找到它们，以及除了横幅之外的其他模块.
也许我用错了组件，不应该用这个？我就是不能把一个echo()方法放在只与特定组件相关的父范围内.想象一下，我可能会在其他元素中使用其他的echo()，这些元素将执行与横幅不同的操作.
我也不能在模板内移动槽内容，因为我需要通过PHP获取数据，这就是为什么我在槽内为做.