Trong Vue.js, Refs là một công cụ mạnh mẽ cho phép bạn truy cập và tương tác với các phần tử DOM và components trong ứng dụng của bạn từ code JavaScript. Refs cho phép bạn "tham chiếu" đến các phần tử cụ thể trong giao diện người dùng của bạn, cho phép bạn thực hiện các thay đổi, kiểm soát và tương tác với chúng một cách linh hoạt.

Trong đoạn mở đầu này, chúng ta sẽ khám phá cách sử dụng Refs trong Vue.js, bao gồm cách khai báo, truy cập và sử dụng chúng trong ứng dụng của bạn. Chúng ta cũng sẽ tìm hiểu về cơ chế hoạt động của Refs và tại sao chúng có thể hữu ích trong một số trường hợp cụ thể.

Bằng cách hiểu sâu hơn về Refs, bạn sẽ có thêm công cụ mạnh mẽ để quản lý và tương tác với giao diện người dùng của ứng dụng Vue.js của mình.

Ref trong Vue.js là một tính năng cho phép bạn lấy tham chiếu đến một phần tử DOM hoặc một instance của một component trong ứng dụng Vue.js. Cơ chế này cho phép bạn truy cập và tương tác với các phần tử DOM hoặc components từ code JavaScript của bạn.

Để sử dụng ref trong Vue.js, bạn cần làm các bước sau:

Khai báo ref: Trong template của bạn, sử dụng directive ref để khai báo một ref.

<section id="app">
  
  // set refs với name là "userText"
  <input type="text" ref="userText">

  // Bạn có thể set thuộc tính ref ở bất kỳ phần tử HTML nào
  <p ref="spanText" data-id="10"></p>
  <button @click="setText">Set Text</button>
  <p>{{ message }}</p>
</section>

Truy cập ref: Trong code JavaScript của bạn, bạn có thể truy cập ref thông qua thuộc tính $refs hoặc bằng cách sử dụng instance Vue.

const app = Vue.createApp({
  data() {
    return {
      currentUserInput: '',
      message: 'Vue is great!',
    };
  },
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      console.log(this.$refs.userText);
      // Hoặc
      console.log(this.$refs['userText']);

      // log refs dưới dạng object
      console.dir(this.$refs.userText);

      // Thực thi với refs
      this.message = this.$refs.userText.value;
    },
  },
});

app.mount('#app');

Cơ chế hoạt động của ref trong Vue.js là khi component được render, Vue.js sẽ tạo ra một tham chiếu đến phần tử DOM hoặc component tương ứng. Khi bạn truy cập ref trong code JavaScript của bạn, Vue.js sẽ cung cấp tham chiếu đó, cho phép bạn tương tác với phần tử DOM hoặc component đó.

Bạn nên sử dụng refs trong Vue.js khi cần truy cập một phần tử DOM hoặc component từ code JavaScript của bạn và không thể thực hiện được thông qua các phương pháp khác như props hoặc event handlers.

Tuy nhiên, cần phải chú ý rằng việc sử dụng refs thường không được khuyến khích và nên tránh sử dụng chúng nếu có thể, vì điều này có thể dẫn đến mã nguồn khó bảo trì và kiểm soát.