Vue for Dummies의 스코프 슬롯

범위가 지정된 슬롯이란?

범위가 지정된 슬롯을 쉽게 이해하려면 일반 슬롯의 개념을 다시 살펴보는 것이 좋습니다.

슬롯을 사용하면 자식 구성 요소에 마크업을 제공할 수 있으며 이 마크업은 자식 구성 요소 내에서 렌더링됩니다.

예:

<template>                                                                                          
  <child-component>                                                                                 
    This will get rendered inside the slot inside the child component -                             
    it is called the slot content.                                                                  
  </child-component>                                                                                
</template>                                                                                         

<script>                                                                                            
import ChildComponent from "./components/ChildComponent.vue";                                       

export default {                                                                                    
  name: 'App',                                                                                      
  components: {                                                                                     
    ChildComponent                                                                                  
  }                                                                                                 
}                                                                                                   
</script>                                                                                           

범위가 지정된 슬롯이란 무엇입니까?

범위가 지정된 슬롯은 자식 구성 요소에서 부모 구성 요소로 데이터를 전달한다는 점을 제외하면 일반 슬롯과 ​​똑같습니다. 그런 다음 이 데이터를 슬롯 콘텐츠 내에서 사용할 수 있습니다.

Vue 2에서 범위 슬롯을 사용하는 방법

자식 구성 요소:

<template>                                                                                          
  <div>                                                                                             
    <slot v-bind:example="example">                                                                 
    </slot>                                                                                         
  </div>                                                                                            
</template>                                                                                         

<script>                                                                                            

export default {                                                                                    
  name: 'ChildComponent',                                                                           
  data() {                                                                                          
    return {                                                                                        
      example: 'just some data...'                                                                  
    }                                                                                               
  }                                                                                                 
}                                                                                                   
</script>                                                                                           

부모 내부에서 데이터가 사용되는 방식:

<template>                                                                                          
  <child-component>                                                                                 
    <template v-slot:default="slotProps">                                                           
      Now we can use the data from the child component here: {{ slotProps.example }}                
    </template>                                                                                     
  </child-component>                                                                                
</template>                                                                                         

<script>                                                                                            
import ChildComponent from "./components/ChildComponent.vue";                                       

export default {                                                                                    
  name: 'App',                                                                                      
  components: {                                                                                     
    ChildComponent                                                                                  
  }                                                                                                 
}                                                                                                   
</script>                                                                                           

이 예제의 전체 코드here를 찾을 수 있습니다.

Vue 3에서 범위 슬롯을 사용하는 방법

자식 구성 요소:

<template>                                                                                          
  <slot :example="example"></slot>                                                                  
</template>                                                                                         

<script setup>                                                                                      
import { ref } from 'vue'                                                                           

const example = ref('just some data')                                                               
</script>                                                                                           

부모 내부에서 데이터가 사용되는 방식:

<template>                                                                                          
  <child-component v-slot="slotProps">                                                              
    Now we can use the data from the child component here: {{ slotProps.example }}                  
  </child-component>                                                                                
</template>                                                                                         

<script setup>                                                                                      
import ChildComponent from './components/ChildComponent.vue'                                        
</script>                                                                                           

이 예제의 전체 코드here를 찾을 수 있습니다.

범위가 지정된 슬롯을 사용하는 이유

그렇다면 vue에서 범위가 지정된 슬롯을 사용하려는 이유는 무엇입니까?

우리는 범위 지정 슬롯을 사용하여 구성 요소 소비자에게 더 많은 책임을 부여하므로 구성 요소를 더 많이 재사용할 수 있습니다!

예: 진행률 표시줄 스크롤

이 놀라운 Vue 기능을 어떻게 사용할 수 있는지에 대한 실제 예를 보려면 이 라이브러리here를 살펴보십시오.

범위가 지정된 슬롯을 사용하면 사용자가 구성 요소의 모양을 완전히 제어할 수 있습니다. 이것의 유일한 단점은 라이브러리/구성 요소의 사용자에게 더 많은 복잡성을 노출한다는 것입니다.