Vue - 부모 참조를 자녀에게 소품으로 전달하는 방법?

Vue - 부모 참조를 자녀에게 소품으로 전달하는 방법?

현재 구성 요소의 참조를 다음과 같은 하위 구성 요소에 전달하려고 한다.

<template>
    <div class="screen" ref="screen">
        <child-component :screenRef="screenRef">
        </child-component>
    </div>
</template>


<script>
    const Parent = {
        name: 'parent',
        data: {
            screenRef: {}
        },
        mounted() {
            this.screenRef = this.$refs['screen']
        }
    }
</script>

Vue.js 유형은 지원하지 않기 때문에HTMLDivElement, 정의할 때 하위 구성 요소에 오류가 발생하는 경우screenRef소품으로

const ChildComponent = {
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}

올바른 방법 좀 가르쳐 주시겠습니까?

다음을 통해 하위 구성 요소에서 상위 구성 요소에 액세스하십시오.

this.$parent

또는

this.$el.parent

또는 상위에서 하위 항목으로 속성을 투명하지 않게 전달하려면 하위 구성 요소의 enetherAttrs 옵션을 사용하십시오.

const ChildComponent = {
  inheritAttrs: true,
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}

너는 모든 것을 바르게 한다.필요한 사항을 선언하지 마십시오.type를 위해screen어린이 부품에 있는 받침대다음props: {screen: {default: {}}}요령을 터득할 것이다.

측면 참고 사항:

• 그mounted훅은 정확한 위치 입니다.$refs의 요소.$data전자가 정의되지 않은 항목created낚싯바늘을 달다

• 부에가 가지고 있다. type: Object그래도 네겐 잘 먹힐 거야screen소품 유형 유효성 검사를 적용하려는 경우 프로펠러 유형 유효성 검사.

• 만약 당신이 우연한 기회에default빈 개체 이외의 개체 값{}비개체 데이터 유형과 달리 함수를 통해 할당해야 함:

  default: function () {
      return {a: 1, b: 2}
  }
  

다른 구성 요소의 데이터가 필요한 경우 소품과 함께 전달하십시오.

또는 여러 구성 요소에 이 데이터가 필요한 경우 Vuex를 사용해 보십시오.

https://vuex.vuejs.org/guide/

기본값을 null로 변경하고 유형을 제거하십시오.내 경우는 형제자매로부터 추천을 받아야 했다.

const ChildComponent = {
  name: 'child',
  props: {
    screen: {
      default: null
    }
  }
}

참조URL: https://stackoverflow.com/questions/51668630/vue-how-to-pass-parent-ref-to-child-as-a-prop