현재 구성 요소와 동일한 수준이 아닌 다른 구성 요소에서 $ref 액세스

현재 구성 요소와 동일한 수준이 아닌 다른 구성 요소에서 $ref 액세스

나는 Vue 어플리케이션을 만들고 있어.헤더가 있고 그 다음에 주요 내용이 있다.아래와 같이 내포 및 구조

TheHeader.vue -> TheLogin.vue

MainContent.vue -> ShoppingCart.vue -> OrderSummary.vue

다음에서 요소에 액세스해야 함TheLogin.vue로부터OrderSummary.vue

this.$refs.loginPopover.$emit('open')

실수를 저지르다"Cannot read property '$emit' of undefined"그래서 분명히 나는 접속할 수 없다.$refs다른 구성 요소로부터.

문제는 어떻게 하면 다른 구성 요소로부터 참조를 얻을 수 있는가입니다.미리 고마워!

편집 1 - 하위 구성 요소에서만 $ref가 작동하는 것으로 확인됨.여러 구성 요소 간에 서로 다른 수준으로 요소에 액세스하려면 어떻게 해야 하는가?

당신은 분명히 그런 계층을 통해 도달하는 것을 원하지 않는다.캡슐화를 깨는군당신은 글로벌 이벤트 버스를 원한다.

그리고 여기 비밀이 있다: 한 개가 내장되어 있다, 라고 불린다.$root주문요약을 실행하십시오.

this.$root.emit('openPopup');

그리고 당신의 TheLogin's에 청취자를 설치하십시오.created훅:

this.$root.on('openPopup', () => this.$emit('open'));

일반적으로, 당신은 ref를 사용하지 않도록 노력해야 한다.

나중에 여기에 오셔서 액세스하고자 하는 분들을 위해$refs이벤트 버스나 상점이면 충분하기 때문에 이러한 특정 이벤트 발생의 경우는 아니지만, 단지 다음과 같은 특성을 얻기 위해 부모 요소의 일부 요소에 액세스하고 싶다고 하자.clientHeight,classList다음과 같은 방법으로 접속할 수 있다.

this.$parent.$parent.$refs //you can traverse through multiple levels like this to access $ref property at the required level

이렇게 하기 위해 부품에 이런 기능을 붙일 수 있다.난 믹신에 내 것을 넣었다.

  public findRefByName(refName) {
    let obj = this
    while (obj) {
      if (obj.$refs[refName]) {
        return obj.$refs[refName]
      }
      obj = obj.$parent
    }
    return undefined
  }

또한 다음과 같은 작업을 돕기 위해 접근자를 추가했다.

  get mycomponent() {
    return this.findRefByName('mycomponent')
  }

이 기능이 존재하면 다음과 같은 작업을 통해 구성 요소에 액세스할 수 있다.

this.mycomponent

압둘라에게 알려줘서 고마워!내 경우는 형제자매를 찾고 있었으니까, 만약 누군가가 그것을 찾으러 올 경우에 대비해서, 여기 예를 들어보자.

var RefName='MyCoolReferenceName';
var MyRef,x;
for(x=0;x<this.$parent.$children.length;x++)
{
  if(typeof this.$parent.$children[x].$refs[RefName] !='undefined')
  MyRef=this.$parent.$children[x].$refs['LABEL_'+bGroupReady.ChildID];
}
if(typeof MyRef !='undefined')
  MyRef.error=true;

PS - MyRef.error=true를 하는 이유는 Quasar 입력과 게으름-규칙="온디맨드"로 ZERO 행운이 있었기 때문이다.오류 메시지와 빨간색 강조 표시를 활성화하기 위해 .error=true를 설정하고 다시 지우기 위해 .clearValidation() 이벤트를 설정하십시오.혹시라도 누군가가 그렇게 하려고 할 경우에 대비해서!

참조URL: https://stackoverflow.com/questions/48818110/access-refs-from-other-components-not-in-the-same-level-as-current-component