🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng độc giả đến với Cafedev! Trong quá trình phát triển ứng dụng Vue.js, đôi khi chúng ta cần truy cập trực tiếp vào các phần tử DOM hoặc các thể hiện thành phần con. Để làm điều này, Vue cung cấp một cách tiếp cận thông qua thuộc tính đặc biệt gọi là `ref`. Hãy cùng khám phá cách sử dụng Template Refs trong Vue.js để tận dụng sức mạnh của nó trong việc tương tác với DOM và các thành phần!

Mặc dù mô hình k-rendering biểu thị của Vue đã trừu tượng hóa hầu hết các thao tác DOM trực tiếp cho bạn, nhưng vẫn có những trường hợp mà chúng ta cần truy cập trực tiếp vào các phần tử DOM cơ bản. Để đạt được điều này, chúng ta có thể sử dụng thuộc tính đặc biệt ref:

<input ref="input">

ref là một thuộc tính đặc biệt, tương tự như thuộc tính key được thảo luận trong chương v-for. Nó cho phép chúng ta nhận một tham chiếu trực tiếp đến một phần tử DOM hoặc một thể hiện thành phần con cụ thể sau khi nó được gắn kết. Điều này có thể hữu ích khi bạn muốn, ví dụ, tập trung một đầu vào một cách chương trình trên việc gắn kết thành phần, hoặc khởi tạo một thư viện bên thứ ba trên một phần tử.

1. Truy Cập Các Refs

Để nhận tham chiếu bằng Composition API, chúng ta cần khai báo một ref với một tên phù hợp với giá trị của thuộc tính ref mẫu:

<script setup>
import { ref, onMounted } from 'vue'

// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>
<template>
  <input ref="input" />
</template>


Nếu không sử dụng <script setup>, đảm bảo cũng trả về ref từ setup().


export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

Kết quả của ref được tiết lộ trên this.$refs:

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

  <input ref="input" />

Lưu ý rằng bạn chỉ có thể truy cập ref sau khi thành phần được gắn kết. Nếu bạn cố gắng truy cập $refs.inputinput trong biểu thức mẫu, nó sẽ là undefinednull trong lần render đầu tiên. Điều này bởi vì phần tử không tồn tại cho đến sau lần render đầu tiên!
Nếu bạn đang cố gắng theo dõi các thay đổi của một ref mẫu, hãy đảm bảo xem xét trường hợp mà ref có giá trị null:

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // not mounted yet, or the element was unmounted (e.g. by v-if)
  }
})

Xem thêm: Kiểu Refs Mẫu

2. Refs bên trong v-for

Yêu cầu v3.2.25 hoặc cao hơn
Khi ref được sử dụng bên trong v-for, ref tương ứng phải chứa một giá trị Mảng, sẽ được điền vào các phần tử sau khi gắn kết:

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>

Thử nghiệm ở Playground
Khi ref được sử dụng bên trong v-for, giá trị ref kết quả sẽ là một mảng chứa các phần tử tương ứng:

Cần lưu ý rằng mảng ref không đảm bảo cùng một thứ tự như mảng nguồn

3. Refs Kiểu Hàm

Thay vì một khóa chuỗi, thuộc tính ref cũng có thể được ràng buộc với một hàm, sẽ được gọi trong mỗi cập nhật thành phần và cho phép bạn hoàn toàn linh hoạt về nơi lưu trữ tham chiếu đến phần tử. Hàm nhận tham chiếu phần tử làm đối số đầu tiên:

<input :ref="(el) => { /* assign el to a property or ref */ }">

Lưu ý chúng ta đang sử dụng một ràng buộc :ref động để chúng ta có thể truyền cho nó một hàm thay vì một chuỗi tên ref. Khi phần tử bị gỡ bỏ, đối số sẽ là null. Bạn có thể, tất nhiên, sử dụng một phương thức thay vì một hàm inline.

4. Ref trên Thành Phần

Phần này giả định bạn hiểu về Thành Phần. Hãy bỏ qua nếu bạn muốn và quay lại sau.
ref cũng có thể được sử dụng trên một thành phần con. Trong trường hợp này, tham chiếu sẽ là một thể hiện của một thành phần:

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value will hold an instance of <Child />
})
</script>
<template>
  <Child ref="child" />
</template>

Khi một phần tử cha nhận một thể hiện của thành phần này thông qua các ref mẫu, thể hiện được trả về sẽ có dạng { a: number, b: number } (refs tự động được giải gói giống như trên các thể hiện bình thường).
Xem thêm: Kiểu Refs Mẫu Thành Phần

Trong kết thúc này, chúng ta đã tìm hiểu cách sử dụng Template Refs trong Vue.js để truy cập và tương tác với các phần tử DOM và thành phần con một cách thuận tiện và linh hoạt. Hy vọng rằng những kiến thức này sẽ giúp bạn xây dựng các ứng dụng Vue.js phong phú và mạnh mẽ hơn. Đừng quên theo dõi Cafedev để cập nhật thêm nhiều thông tin thú vị và hữu ích về Vue.js cũng như các công nghệ lập trình khác!

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM