하위 구성 요소에서 다른 VueJS 하위 구성 요소로 참조 컨텐츠 전달

하위 구성 요소에서 다른 VueJS 하위 구성 요소로 참조 컨텐츠 전달

나는 VueJs를 배우고 있는데 레퍼런스, $refs 강의에서 조금 혼란스러웠어.vue의 설명서에서 이해하려고 했지만 원하는 것을 얻지 못했습니다.

예를 들어 다음 컴포넌트가 있는 경우:

<user-item ref="details"></user-item>

이 컴포넌트에서 데이터를 얻습니다.

이.$refs.세부 사항

이 사용자 항목은 사용자 구성 요소의 하위 항목이기 때문에 사용자 상위 구성 요소에서 해당 데이터를 사용합니다.

<div id="User">
  <user-item ref="details"></user-item>
</div>

다른 컴포넌트가 있는 동시에 User 컴포넌트에 대해 하위 컴포넌트인 Permissions도 있다고 칩시다.

<div id="User">
   <user-item ref="details"></user-item>
   <permissions></permissions> 
</div>

이 Permissions 컴포넌트에도 같은 것이 필요합니다.$refs.details, 하지만 제가 테스트한 결과로는 실험처럼 작동하지 않습니다.

이것은 단순한 예에 불과합니다.

제가 어떻게 하는지 누가 좀 알려주시겠어요?

사용할 필요가 없습니다.$refs컴포넌트 간에 데이터를 전달합니다.사용하다data,props또는 컴포넌트 간에 이벤트를 디스패치합니다.

정말로 액세스 하고 싶은 경우user-item경유로$refs그럼 이렇게 하면 되겠네요.permissions요소.

this.$parent.$refs.details

기본적으로 부모에 대한 참조를 얻습니다.User컴포넌트)를 가진details그 안에$refs.

여기에서는 컴포넌트가 다음과 같이 조립되어 있는 것을 전제로 하고 있습니다.

<user>
  <user-item ref="details"></user-item>
  <permissions></permissions>
</user>

편집: $refs컴포넌트를 장착하면 비어 있는 것 같기 때문에details될 것이다undefined통째로 넘기다$refs에 반대하다permissions컴포넌트propsOP와 함께 작동하는 것 같습니다.

<user>
  <user-item ref="details"></user-item>
  <permissions :parentRefs="$refs"></permissions>
</user>

어디에parentRefs의 멤버입니다.permissions컴포넌트props.

OP가 액세스 할 수 있었다.user-item부터permissions사용.this.parentRefs.details.

언급URL : https://stackoverflow.com/questions/45187857/passing-refs-content-from-a-child-to-another-vuejs-child-component