[Vue.js] 작용역을 가진 홈을 이해할 수 있도록 예를 결합하여 고려한다.

입문

간단하게 사용하는 것이 매력적인 Vue.js에서
내가 최초의 관문이 되고 싶은 것 중 하나는 슬롯이다.
특히 렌즈 홈.
이해가 어려운 분들이 좀 많은 것 같아요.
나는 나 자신에 대한 이해를 쓰고 싶다.

슬롯 정보

우선 슬롯에 대한 복습입니다.
슬롯에 특정 영역의 도면 내용 표시
부모님께 전적으로 부탁하고 싶을 때 사용하세요.
저녁 메뉴를 어머니께 알려드리며 "따뜻한 거 먹고 싶어요~"
실제로 무엇을 하는지는 어머니에게 맡기는 인상이다.
실제로 코드로 표현하면 이런 느낌인가요?
MyChild.vue

<template>
  <div>
    <h2>今日の献立</h2>
    <slot name="hot-meal"></slot>
  </div>
</template>

상위 어셈블리 사용
MyParent.vue

<template>
  <div>
    <my-child>
      <template v-slot:hot-meal>
        <h3>たまごスープ</h3>
        <p>賞味期限が過ぎた卵のたまごスープ</p>
      </template>
    </my-child>
  </div>
</template>

　
드로잉 결과

이렇게 하면 서브어셈블리<slot name="hot-meal">에 지정된 영역
부모 구성 요소 v-slot:hot-meal 형식으로 slot의name 지정하기
전체 드로잉 컨텐트를 전달할 수 있습니다.
참고로 슬롯이 하나라면name도 생략할 수 있습니다.

역할 영역이 있는 슬롯 정보

슬롯을 복습해도
다음 주제는 역할 영역이 있는 슬롯입니다.
도메인용 슬롯
슬롯에서
부모님이 사용하실 수 있는 구조입니다.
너는 아이에게 계란이 있다고 생각해라.
나는 저녁 식사 때 이 계란을 사용할 수 있다고 생각한다.
이 경우 계란에 스티커를 붙이고'이 계란은 쓸 수 있어요'라고 말하는 것이 인상적이다.
코드로 설명하다.
서브어셈블리의 slot 태그에서
나는 egg라는 이름으로 egg라는 데이터를 연결했다.
이 바인딩 속성을 슬롯 속성이라고 합니다.
MyChild.vue

<template>
  <div>
    <h2>今日の献立</h2>
    <slot name="hot-meal" v-bind:egg="egg"></slot>
  </div>
</template>

스크립트 쪽은 이런 느낌이에요.
MyChild.vue

<script>
export default {
  data(){
    return {
      egg: 'うずらの卵'
    }
  }
}
</script>

　
　
상위 구성 요소에서 슬롯을 통한 속성
서브어셈블리의 데이터를 사용할 수 있습니다.
다음 예에서, 우리는 슬롯 속성을 받았는데, 이름은 slotProps이다
slotProps라는 이름이 아니더라도 임의의 이름을 사용할 수 있습니다.
MyParent.vue

<template>
  <div>
    <my-child>
      <template v-slot:hot-meal="slotProps">
        <h3>たまごスープ</h3>
        <p>{{ slotProps.egg }}のたまごスープ</p>
      </template>
    </my-child>
  </div>
</template>

　
　
따라서 하위 구성 요소egg의 데이터를 받을 수 있습니다.

총결산

slot은 묘사 내용을 부모 대상에 의뢰하는 데 사용

역할 영역이 있는 홈은 부모에게 그림에서 사용할 수 있는 재료를 전달하는 데 사용된다

끝내다

'렌즈 슬롯이라고 부르기 어려운 개념이 있으니 Vue.js를 사용하지 마세요'라는 사람이 줄었으면 좋겠어요.그런 사람 없어요?

참고 자료