구성 요소 내부의 구성 요소에서 메서드 호출 <slot></slot>

Question

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> 

을하지만 시도 후 echo을 호출하려면 배너 구성 요소 범위가 아닌 부모 범위에서 해당 범위를 찾고 메서드가 정의되지 않았다고합니다.

이것을 구현하는 가장 좋은 방법을 알고 싶습니다. 내 프로젝트 전반에 걸쳐이 메서드와 비슷한 다른 수백만 가지 메서드를 갖게 될 것이기 때문에 부모 메서드 내에서 메서드를 선언하는 것은 쓸모가 없습니다. 그렇게하면 빠르게 조직화되지 않게됩니다. 나는 무엇이든간에 안에이 배너 방법을 갖고 싶기 때문에, 배너를 제외한 다른 모듈뿐만 아니라 모든 것을 쉽게 찾을 수 있습니다.

어쩌면 내가 구성 요소를 잘못 사용하고 있는데이 용도로 사용하면 안됩니까? 방금 echo() 메서드를 해당 특정 구성 요소와 관련된 무언가의 부모 범위 안에 넣을 수 없습니다. 다른 echo()이 다른 요소에서 배너의 것과 다른 기능을 수행 할 것이라고 가정 해보십시오. 내가 PHP를 통해 데이터를 얻을 필요가 있기 때문에

나는 또한 내가 슬롯 내부의 했던 그 이유는, 템플릿 내부의 슬롯 내용을 이동할 수 없습니다.

도움 주셔서 감사합니다.

Answer 1

이 특정 상황에서는 scoped slot을 사용해야합니다.

구성 요소에는 슬롯에 사용할 수있는 속성 (이 경우 echo 메서드)을 전달합니다.

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

앱 템플릿에서 슬롯에 삽입하려는 콘텐츠를 범위 속성이있는 템플릿 태그로 묶습니다.

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

여기는 example입니다.

슬롯에 전달 된 모든 것을 사용할 필요가 없거나 매번 props.echo을 쓰는 것을 피하기 위해 범위가 지정된 속성을 제거 할 수도 있습니다.

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