Vue 템플릿 참조를 사용하여 HTML 요소에 액세스하는 방법

Vue는 DOM을 조작할 때 많은 강력한 기능을 제공합니다. 상태 유지 작업을 단순화하고 유지 관리하기 쉽고 사용하기 재미있는 UI를 만듭니다. Vue가 정말 잘하는 한 가지는 DOM을 직접 조작할 필요가 없다는 것입니다. 하지만 때로는 여전히 DOM 요소 자체를 조작하거나 참조해야 합니다. 다행스럽게도 Vue는 이를 고려했으며 ref 속성을 사용하여 이를 수행할 수 있습니다.

Vue에서 DOM 요소 참조

Vue 문서에서 .querySelector()를 사용하는 것이 확실히 가능하지만 모범 사례는 아닙니다. DOM 요소를 참조하려면 Vue에서 ref 속성을 사용할 수 있습니다.

간단한 예를 살펴보겠습니다. 아래에는 입력이 있는 App.vue 페이지가 있으며 메서드 중 하나에서 해당 입력을 직접 참조하려고 합니다.

<template>
    <button id="myButton">Some Button</button>
</template>

<script>
export default {
    mounted: function() {
    }
}
</script>

<style scoped>
button {
    background: black;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>

Vue는 $ref라는 속성에 DOM 요소에 대한 참조를 저장할 수 있습니다. 가장 먼저 해야 할 일은 Javascript에서 참조하려는 요소에 ref 속성을 추가하는 것입니다. ref 속성의 값은 $ref 속성 내의 이름이 됩니다.

내 경우에는 myButton이라고 합니다.

<template>
    <button id="myButton" ref="myButton"></button>
</template>

다음으로 Javascript에서 아래와 같이 해당 참조를 호출할 수 있습니다.

export default {
    mounted: function() {
        console.log(this.$ref.myButton);
    }

이것은 DOM 요소 자체를 반환하므로 DOM 요소를 조작하는 것처럼 조작할 수 있습니다.

Vue 참조를 사용하여 DOM 요소를 반환하는 방법

자식 구성 요소 참조
버튼이 구성 요소라면 동일한 아이디어를 사용하여 액세스할 수도 있습니다. 예를 들어 TestComponent라는 자식 구성 요소가 있다고 가정합니다. 아래와 같이 자식 구성 요소에 직접 ref를 추가할 수 있습니다.

<template>
    <button id="myButton" ref="myButton">Some Button</button>
    <TestComponent ref="anotherButton">
</template>

<script>

import TestComponent from '../components/TestComponent.vue';

export default {
    components: {
        TestComponent
    },
    mounted: function() {
        // Console logs our "myButton"
        console.log(this.$refs.myButton);
        // Console logs "anotherButton"
        console.log(this.$refs.anotherButton);
    }
}
</script>

<style scoped>
button {
    background: black;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>

위에서 구성 요소 자체에 ref를 추가합니다.

<TestComponent ref="anotherButton" />

여기서 차이점은 DOM 요소 자체를 반환하지 않는다는 것입니다. 대신 자식 구성 요소에 대한 개체를 반환합니다.



자식 구성 요소의 DOM 요소 참조
참조를 사용할 때 자식 구성 요소에 대한 객체를 얻으므로 자식 구성 요소 자체 내에서 DOM 요소에 액세스하려면 구성 요소 자체의 DOM 요소를 참조하는 $el을 사용해야 합니다.

// This is the child component reference
this.$refs.anotherButton
// This is the DOM element for the component
this.$refs.anotherButton.$el

자식 구성 요소의 메서드 참조

하위 구성 요소를 참조하는 것은 전체 구성 요소를 참조하므로 이 참조를 사용하여 해당 메서드를 참조할 수 있습니다. 자식 구성 요소에 아래 코드와 같은 Javascript가 있다고 가정해 보겠습니다.

TestComponent.vue:

<script>
export default {
    methods: { 
        someFunction: function() {
            console.log('Hello');
        }
    }
}
</script>

기본 App.vue 파일에서 참조를 통해 이 메서드를 참조할 수 있습니다. 예를 들어:

<template>
    <button id="myButton" ref="myButton">Some Button</button>
    <TestComponent ref="anotherButton">
</template>

<script>
import TestComponent from '../components/TestComponent.vue';
export default {
    components: {
        TestComponent
    },
    mounted: function() {
        this.$refs.anotherButton.someFunction();
    }
}
</script>

<style scoped>
button {
    background: black;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>

위에서 자식 컴포넌트에 참조 ref="anotherButton"을 추가했으므로 해당 참조를 통해 Javascript에서 참조할 수 있습니다. 모든 방법은 다음 참조를 통해 사용할 수 있습니다.

this.$refs.anotherButton.someFunction();

v-for와 함께 참조 사용

동일한 개념이 v-for 에 적용됩니다. v-for 요소에 ref를 사용하면 v-for 루프에서 생성된 각 요소는 해당 참조 내에서 배열로 반환됩니다.

예를 들어 다음과 같은 코드가 있다고 가정해 보겠습니다.

<template>
    <ul>
        <li v-for="(item, index) in locations" :key="index" ref="myLocations">{{ item.name }}</li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            locations: [
                { name: 'London', date: '11/02/2022' },
                { name: 'Paris', date: '12/01/2022' },
                { name: 'Tokyo', date: '04/06/2021' }
            ]
        }
    },
    mounted: function() {
        let liElements = this.$refs.myLocations;
        console.log(liElements);
    }
}
</script>

<style scoped>
button {
    background: black;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>

li 요소에 myLocations라는 참조를 추가했으므로 이제 this.$refs.myLocation을 통해 액세스할 수 있습니다. 또한 v-for이므로 myLocation은 배열이 됩니다. 두 번째 li 요소를 얻으려면 다음을 수행합니다.

this.$refs.myLocations[1];

결론

Vue의 참조는 Vue가 생성하는 DOM 요소에 액세스하는 강력한 방법입니다. 또한 Vue 프레임워크 내에서 작업할 때 가장 좋은 방법입니다. 이 기사를 즐겼기를 바랍니다. For more Vue content, you can find it here .