vue) component height #2307

# 컴포넌트에서 높이 구하기

 

 

1. 컴포넌트에 ref="링크명" 붙이기

 

2. this.$refs.링크명 으로 접근

 

3.  높이구하기 -  mounted이후에 접근해야  undefined 오류가 안뜬다.

 

private 함수명() {
   //이벤트
   const 높이 = this.$refs.링크명.$el.clientHeight;
}

 

728x90

 

# html 요소에서 높이 구하기 

 

 

 

1. 필요한 html 에 ref="링크명" 붙이기

2. this.$refs.링크명 으로 접근

3. 높이구하기 - 지시자 $el 없이 attribute로 바로 접근한다.

 

private 함수명() {
   //이벤트
   const 높이 = this.$refs.링크명.clientHeight;
}

 

반응형

 

👀느낀점 

 

코드를 짜다가 추가하여 어떠한 상황을 만들었을때

어떠한 이유로 안될경우 
기존 코드에 어떠한 상태값을 더해서 파라미터로 보내
그 값에 따라 결과를 짜는 것이 좀더 코드가 간결해지고 유지보수가 편하다

-> 나는 그냥 된다고 새로 함수를 만들어서 복잡하게 짰음..되긴하나 유지보수가 어려움..

 

하나더 

 

로컬스트로지에서 키값을 활용하여 boolean으로 반환해야 할 때

private 변수명: boolean = true;
this.변수명 = localStorage.getItem("키값") !== 'false';  // 이렇게 하면 벨류값에 따라서 boolean값이 들어가게 된다.

// 여기서 뒤에 'false'로 쓴것은 맨처음 초기값을 true로 인식하기 위해서 이다. 로컬스트로지에 값이 없을때(null) 일때를 대비한것