Đối tượng Vue $el
Ví dụ
Sử dụng đối tượng $el để thay đổi màu nền của thẻ <div> ở cấp độ gốc.
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
Chạy Ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Đối tượng $el đại diện cho nút DOM gốc của thành phần Vue.
Đối tượng $el không tồn tại cho đến khi ứng dụng Vue được gắn kết.
Nếu chỉ có một phần tử gốc HTML trong <template> :
- đối tượng
$elsẽ là phần tử gốc đó. - DOM có thể được thao tác trực tiếp bằng cách sử dụng đối tượng
$el(xem ví dụ ở trên), nhưng điều đó không được khuyến khích. - tốt hơn là sử dụng thuộc tính Vue
refvà chức năng Vue khác để thay đổi DOM theo cách khai báo, vì nó dẫn đến mã nhất quán hơn và dễ bảo trì hơn (xem Ví dụ 1 bên dưới).
Nếu có nhiều hơn một phần tử gốc HTML trong <template> :
- đối tượng
$elsẽ chỉ là một nút văn bản DOM giữ chỗ mà Vue sử dụng nội bộ (không phải phần tử DOM thực tế). - DOM không thể được thao tác bằng cách sử dụng đối tượng
$elkhi có nhiều phần tử gốc (xem Ví dụ 2 bên dưới).
Lưu ý: Trong Composition API của Vue 3, thuộc tính $el không thể truy cập được trong <script setup> (sử dụng chức năng setup ).
Thêm ví dụ
ví dụ 1
Sử dụng thuộc tính ref để thay đổi màu nền của thẻ <div> theo khuyến nghị, thay vì sử dụng đối tượng $el .
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
}
</script>
Chạy Ví dụ »Ví dụ 2
Với nhiều hơn một phần tử trong thư mục gốc của <template> , đối tượng $el sẽ chỉ là một biểu diễn nút văn bản (không phải phần tử DOM thực tế) của phần tử đầu tiên của các phần tử gốc, được Vue sử dụng nội bộ.
Chúng ta không thể thao tác DOM với đối tượng $el là những trường hợp như vậy.
<template>
<div>
<h2>Example $el Object</h2>
<p>We are not able to use the $el object to change the background color of the root DIV tag when there are other tags on the root level. Open browser console to see the error generated.</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>With this extra p-tag there are two tags on the root level.</p>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
}
</script>
<style>
#app > div, #app > p {
border: solid black 1px;
padding: 10px;
}
</style>
Chạy Ví dụ »Ví dụ 3
Sử dụng đối tượng $el để thay đổi màu nền của phần tử con <h2> .
<template>
<div>
<h2>Example $el Object</h2>
<p>Using the $el object to change the background color of the H2 child element.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.children[0].style.backgroundColor = 'lightblue';
}
}
}
</script>
Chạy Ví dụ »Trang liên quan
Hướng dẫn về Vue: Tham khảo mẫu Vue
Hướng dẫn Vue: Phương thức Vue
Tham chiếu Vue: Thuộc tính Vue 'ref'
Tham chiếu Vue: Đối tượng Vue $refs
