💚v-ref💚

<template>
  <div>
    <!-- Your v-pagination component -->
    <v-pagination ref="pagination"></v-pagination>
  </div>
</template>

<script>
export default {
  mounted() {
    // Access the DOM element for v-pagination__next
    const nextButton = this.$refs.pagination.$el.querySelector('.v-pagination__next');

    // Add an event listener
    nextButton.addEventListener('click', this.nextButtonClickHandler);
  },
  methods: {
    nextButtonClickHandler() {
      // Your custom logic when the next button is clicked
      console.log('Next button clicked!');
    },
  },
};
</script>

이벤트를 추가하기위해서 querySelector를 통해 접근을 한다. 그런데 알다시미 조사 범위가 HTML내부이다. 그리고 QuerySelector가 많아진다면 동일한 html을 여러번 조회하는 상황이 발생해 병목현상이 일어날것이다.

vue에서는 이걸 방지하기 위해서 ref를 사용해 조사 범위 대상을 좁힌 이후에서 querySelector를 사용하므로 병목현상의 우려는 배제될 것이다!