Call Method From Component Inside Component's

Question

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

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

Baca Juga

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>

Solution 2:

You can also refer to the parent component by reference.

<banners ref="TheBanner">
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="$refs.TheBanner.echo()">Echo</a>
    <?php endfor; ?>
</banners>

JavaScript Square

Call Method From Component Inside Component's

Solution 1:

Solution 2:

Post a Comment for "Call Method From Component Inside Component's "