Thiết kế và Tái Sử Dụng Các Thành Phần với Vue.js: Scoped CSS, Mixins và Slots.

Phân tích yêu cầu

Trong bài này, chúng ta sẽ học cách sử dụng Vue.js để thiết kế và phát triển các thành phần modular, có khả năng tái sử dụng và có thể nâng cấp. Chúng ta sẽ tập trung vào các tính năng của Vue.js như slots, Scoped CSS và Mixins để thiết kế các thành phần phương thức. Bài học bao gồm các tiêu đề sau:

1. Giới thiệu về Vue.js
2. Tạo một Vue Component
3. Scoped CSS
4. Mixins
5. Slots
6. Tổng kết và hướng dẫn thực hành

1. Giới thiệu về Vue.js

Vue.js là một framework phía client được sử dụng để phát triển các ứng dụng web. Nó được phát triển bởi Evan You và được giới thiệu lần đầu vào năm 2014. Vue.js hỗ trợ hai chế độ định nghĩa thành phần: Định nghĩa thành phần toàn cục và định nghĩa thành phần cục bộ.

2. Tạo một Vue Component

Chúng ta bắt đầu bằng cách tạo một Vue Component đơn giản. Ta có thể tạo thành phần bằng cách sử dụng “Vue.component” và truyền vào hai tham số: tên thành phần và một đối tượng chứa định nghĩa thành phần.

Ví dụ:

Vue.component('hello-world', {
  template: '
    Hello World
  '
})

Trong đoạn mã trên, chúng ta đã tạo một thành phần Vue.js đơn giản mang tên “hello-world”. Thuộc tính “template” đặc tả mẫu HTML của thành phần này.

3. Scoped CSS

Vue.js hỗ trợ tính năng Scoped CSS, giúp chúng ta kiểm soát CSS của thành phần và tránh xung đột với CSS của các thành phần khác.

Để sử dụng Scoped CSS, chúng ta chỉ cần thêm thuộc tính scoped vào thẻ style của thành phần.

Ví dụ:

/* Your code... */ <template></template> <div class="my-component"> <h1>{{ title }}</h1> </div> <script> export default { data() { return { title: 'My Component' } } } </script> <style scoped> .my-component { background-color: blue; } </style>

Trong ví dụ trên, chúng ta đã thêm Scoped CSS vào thành phần Vue.js. Lưu ý rằng các quy tắc CSS nằm trong phần tử được phân phối có thể ảnh hưởng đến toàn cầu, nhưng chỉ ảnh hưởng đến phần tử component hiện tại bên trong đó. Vì vậy, chúng ta có thể sử dụng các tên lớp giống nhau trên các thành phần khác nhau mà không cần lo ngại về xung đột CSS.

4. Mixins

Mixins là một khái niệm quan trọng trong Vue.js, cho phép chúng ta sử dụng chung các tài nguyên hoặc chức năng qua nhiều thành phần khác nhau.

Chúng ta có thể định nghĩa một Mixin bằng phương thức Vue.mixin. Mixin có thể có các thuộc tính và phương thức giống như một đối tượng options trong Vue.component.

// Define a mixin object
const myMixin = {
  created() {
    console.log('Mixin created lifecycle hook called');
  },
  methods: {
    sayHi() {
      console.log('Mixin sayHi method called')
    }
  }
};

// Define a component that uses the mixin
Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      title: 'My Component'
    }
  },
  methods: {
    greeting() {
      console.log('Hello World')
    }
  },
});

// Create Vue app and mount the component
new Vue({
  el: '#app',
  template: '',
});

Trong đoạn mã trên, chúng ta đã định nghĩa một Mixin và sử dụng nó trong thành phần “my-component”. Component này sẽ có các phương thức được định nghĩa trong Mixin.

5. Slots

Slots là một tính năng quan trọng trong Vue.js, cho phép chúng ta định nghĩa nội dung động cho các thành phần. Nó giúp tăng cường tính linh hoạt và tái sử dụng của các thành phần.

Chúng ta có thể định nghĩa nhiều slot trong một thành phần và đặt nội dung vào chúng bằng cách sử dụng thẻ . Chúng ta cũng có thể đặt một giá trị mặc định cho slot.

Ví dụ:

<my-component></my-component> <h1 slot="header">{{ title }}</h1> {{ content }} <p slot="footer">Copyright 2021</p>

Trong đoạn mã trên, chúng ta đã định nghĩa ba slot với các tên khác nhau. “header” slot chứa tiêu đề của thành phần và “footer” slot chứa bản quyền của thành phần.

6. Tổng kết và hướng dẫn thực hành

Trong bài học này, chúng ta đã học cách sử dụng Vue.js để thiết kế và phát triển các thành phần modular có khả năng tái sử dụng và có thể nâng cấp. Chúng ta đã tìm hiểu về Scoped CSS, Mixins và Slots và thực hành chúng qua các ví dụ đơn giản.

Để nâng cao kỹ năng của mình, các bạn có thể thực hành bằng cách phát triển các thành phần phức tạp hơn, sử dụng các plugin và built-in directives của Vue.js. Ngoài ra, các bạn có thể đọc thêm tài liệu chính thức của Vue.js để có được kiến thức sâu hơn.

Xem Top 10 kỹ năng Vue dev nào cũng phải biết: Vuejs dev phải biết 10 kỹ năng nâng cao này nếu muốn thành senior

Kỹ năng tiếp theo: Quản lý trạng thái (state) với Vuex cho ứng dụng VueJS của bạn.