Call Method From Component Inside Component's

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:

Solution 1:

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

<divclass="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><templateslot-scope="props"><?phpfor ($i = 0; $i < 5; $i++) : ?><imgsrc="http://lorempixel.com/1440/500"alt="Banner image"class="banner"><ahref="#"v-on:click="props.echo">Echo</a><?phpendfor; ?></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><templateslot-scope="{echo}"><?phpfor ($i = 0; $i < 5; $i++) : ?><imgsrc="http://lorempixel.com/1440/500"alt="Banner image"class="banner"><ahref="#"v-on:click="echo">Echo</a><?phpendfor; ?></template></banners>

Solution 2:

You can also refer to the parent component by reference.

<bannersref="TheBanner"><?phpfor ($i = 0; $i < 5; $i++) : ?><imgsrc="http://lorempixel.com/1440/500"alt="Banner image"class="banner"><ahref="#"v-on:click="$refs.TheBanner.echo()">Echo</a><?phpendfor; ?></banners>

Share