Call method from component inside component's <slot></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>