슬롯에 있는 아동 구성 요소의 반응형 데이터에 액세스하는 방법

슬롯에 있는 아동 구성 요소의 반응형 데이터에 액세스하는 방법

현재 나는 부모 구성요소를 가지고 있는데, 부모 구성요소를 렌더링하고, 구성요소(모달.vue라고 하는 모달)를 슬롯으로 아이에게 전달하기도 한다.

상위.vue

<ChildComponent :id='1>
 <modal slot="modal" :postTitle="'test'" />
</ChildComponent>

Child.vue

export default {
props : ['id'],
data(){
return {
 modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>

모달.뷔에

<script>
export default {
  name: "model",
  props: ["postTitle"],
  data() {
    return {
      heading: "test"
    };
  },
  mounted() {
    console.log("mounted modal slot");
    console.log(this.postTitle);
    console.log(this.modalHeading);
};
</script>

<template>
  <div>
    <h2>{{ modalHeading }}</h2>
    <h3>This will be the modal slot</h3>
    <p>{{ postTitle }}</p>
  </div>
</template>

내 질문은 어떻게 하면 슬롯 구성 요소에 있는 아이의 데이터(및 기능)에 액세스할 수 있는가입니다.

범위 슬롯으로 작동시키려 했지만 구문에 금이 가지 않는 것 같아.

나는 기본적으로 모달 슬롯에 아동 데이터 일부를 표시하려고 한다.본질적으로 상위 구성요소는 페이지, 하위 구성요소는 테이블, 슬롯은 모달이다.클릭된 각 테이블 행에 대해 테이블 데이터가 포함된 모달이 나타난다.어떻게 하는 게 좋을까?

이런 거 아닐까?

<template>
  <div>
    <table>
      <row v-for="item in items" @click="onRowClick(item)"
         ....show some data
      </row>
    </table>
    <modal v-if="activeItem" :item="activeItem" @onClose="onModalClose" />
  </div>
</template>
<script>
export default {
  name: 'child',
  props: ["items"]
  data() {
    return {
      activeItem: null
    }
  },
  methods: {
    onRowClick(item) {
      this.activeItem = item;
    },
    onModalClose() {
      this.activeItem = null;
    }
  }
}
</script>

이게 어떻게 슬롯의 유연성이 있는지 이해가 안 가.

음, 슬롯만큼 유연하지는 않지만, 일을 완수한다. :)

Child/table 구성 요소를 다른 장소에서 사용하고 일부의 모양을 변경할 수 있도록 설계해야 하는 경우(경우에 따라 세부사항) 슬롯을 사용하는 것이 좋다.

슬롯

슬롯은 컨텐츠의 배포처다.구성 요소 내부에 슬롯을 배치하면 "내 상위 구성 요소가 부분 템플릿을 제공할 수 있다.이 템플릿이 렌더링되면(부모의 구성요소 범위 내에서 - 해당 템플릿은 부모의 데이터/방법 등에만 액세스할 수 있기 때문에 중요), 렌더링된 결과를 가져와 내 템플릿 내부의 정확한 위치에 배치하겠다."일반 슬롯을 사용하는 것은 HTML을 구성요소에 전달하는 것과 같다.

내 질문은 어떻게 하면 슬롯 구성 요소에 있는 아이의 데이터(및 기능)에 액세스할 수 있는가입니다.

일부 어린이 데이터에 대한 슬롯 템플릿 액세스 권한을 명시적으로 부여하십시오.자녀 구성 요소에 소품이 있다고 가정해 봅시다.item. 범위 슬롯은 다음과 같이 정의하십시오.

<slot name="rowExpander" :itemProp="item"></slot>

...부모님 안에서 이렇게 쓰세요.

<template v-slot:rowExpander="slotProps">
  <MyRowExpanderComponent :item="slotProps.itemProp" />
</template>

또는 ES2015 파괴 사용

<template v-slot:rowExpander="{ itemProp }">
  <MyRowExpanderComponent :item="itemProp" />
</template>

범위 슬롯에 데이터/프로포즈/방법/계산 등 거의 모든 것을 전달할 수 있으며, 다음과 같은 인스턴스(instance) 특성도 사용할 수 있다.$data또는$props:

<slot name="rowExpander" :childProps="$props"></slot>

하위 인스턴스(instance) 자체를 통과할 수 없음:

<slot name="rowExpander" :child="this"></slot>

(때문에)this템플릿 내부에 정의되어 있지 않음 - 렌더링 기능을 사용하여 템플릿 없이 구성 요소를 작성하면 가능하다고 생각하지만, 다른 이야기)

범위 슬롯 템플릿은 일반 Vue 템플릿에 불과하다는 점을 이해하는 것이 중요하다.정의된 구성 요소(상위)의 모든 인스턴스(instance) 속성과 추가적으로slotProps이의를 제기하다범위 슬롯 템플릿 내에서 구성 요소를 사용하는 경우 해당 구성 요소가 모든 하위 데이터에 액세스할 수 없거나slotProps 자동 마법으로 - 여전히 명시적으로 전달해야 한다(내 경우와 마찬가지로).MyRowExpanderComponent의 예의 예)

참조URL: https://stackoverflow.com/questions/59073808/how-to-access-child-components-reactive-data-in-a-slot