구성 요소 내부 구성 요소에서 호출 방법

구성 요소 내부 구성 요소에서 호출 방법

나는 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>

그런데 에코를 부르려고 하면 배너 구성요소 범위가 아닌 부모 범위에서 찾고, 방법이 정의되어 있지 않다고 한다.

나는 이것을 실행하는 가장 좋은 방법을 알고 싶다.만약 내가 그렇게 한다면, 내 프로젝트 내내 이 사례와 비슷한 수백만 가지의 다른 방법들을 가질 것이기 때문에 부모 범위 안에서 그 방법을 선언하는 것은 소용없는 일이다.나는 배너 외에 다른 모듈들뿐만 아니라 모든 배너 방법을 배너 안에 넣고 싶다.

아마도 내가 부품을 잘못 사용하고 있는 것 같은데, 이걸 사용하면 안 되는 건가?나는 단지 그 특정 구성 요소에만 관련된 것에 대해 부모 범위 안에 에코() 방법을 넣을 수 없다.어쩌면 내가 배너와 다른 일을 할 다른 요소들에 다른 메아리()를 갖게 될 것이라고 상상해보라.

나도 PHP를 통해 데이터를 얻어야 하기 때문에 템플릿 안쪽으로 슬롯 내용을 옮길 수 없어. 그래서 슬롯 안쪽으로.

이러한 특별한 상황에서는 범위 슬롯을 사용해야 한다.

구성 요소에서 슬롯에서 사용할 수 있는 속성을 전달하십시오(이 경우echo방법.

<div class="banners">
    <slot :echo="echo"></slot>
</div>

앱 템플릿에서 슬롯에 삽입할 콘텐츠를 범위 속성이 있는 템플릿 태그로 감싸십시오.

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

여기 예가 있다.

슬롯에 전달된 모든 항목을 사용하지 않아도 되거나 쓰기를 피할 수 있는 경우 범위 지정 속성을 손상시킬 수도 있음props.echo매번

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

상위 구성요소를 참조로 참조할 수도 있다.

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

참조URL: https://stackoverflow.com/questions/44103424/call-method-from-component-inside-components-slot-slot