[ Vue ] ref 사용해서 클릭이벤트 적용하기

 

1.Ref란

DOM에 접근할때 사용하는것이 ref이다.

 

아래와 같은 형태로 element에 Ref로 값을 지정하고

그 값으로 해당 element에 접근이 가능하다.

<button type="button" @click="clickEvent" ref="click">Click!</button>

//ref로 dom에 접근
this.$refs.click

 

사실 Vue파일의 template 안에서 해당 element에 @click="clickEvent"를 적용하면 되지만,

 

2. 내가 이 방법을 사용한 이유는

Ant Design of Vuef를 사용하여 화면에 그려진 checkbox select가 내 코드에 존재하지 않아서

js로 dom을 선택해 click을 제어해줘야 하는 경우가 생겨서 찾아서 적용한 방법이다

🤧그리고 어쨋든 dom에 직접 접근하는건 지양해야 한다고 한다

 

3. 사용법

특정 element를 눌렀을때

button의 clickEvent를 실행시키고 싶을 때 사용하는방법은 아래와같다

 

this.$refs.ref이름.$el.click()

function anotherRandomFunction() {
	this.$refs.click.$el.click()  
}

 

+ ) ref랑 refs를 잘 보고 적용

elemenet에 ref를 적용할때는 ref="이름" 이런식으로 지정하지만

코드 사용시에는 this.$refs..... 형태로 작성한다

 

 

---

✔️참고

https://stackoverflow.com/questions/31917889/is-it-possible-to-trigger-events-using-vue-js