Thành phần Vue

Thành phần là gì?

Các thành phần là các đoạn mã độc lập và có thể tái sử dụng, đóng gói một phần cụ thể của giao diện người dùng để chúng ta có thể tạo ra các ứng dụng Vue có khả năng mở rộng và dễ bảo trì hơn.

Chúng ta có thể tự tạo các thành phần trong Vue hoặc sử dụng các thành phần tích hợp mà chúng ta sẽ tìm hiểu sau, như <Teleport> hoặc <KeepAlive> . Ở đây chúng tôi sẽ tập trung vào các thành phần chúng tôi tự làm.

Tạo một thành phần

Các thành phần trong Vue là một công cụ rất mạnh mẽ vì nó cho phép trang web của chúng ta có khả năng mở rộng cao hơn và các dự án lớn hơn trở nên dễ xử lý hơn.

Hãy tạo một thành phần và thêm nó vào dự án của chúng ta.

1. Tạo một thư mục mới components bên trong thư mục src .

2. Bên trong thư mục components , tạo một tệp mới FoodItem.vue . Người ta thường đặt tên các thành phần theo quy ước đặt tên PascalCase, không có dấu cách và tất cả các từ mới đều bắt đầu bằng chữ in hoa, cũng là từ đầu tiên.

3. Đảm bảo tệp FoodItem.vue trông như thế này:

 <template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples'
    }
  }
};
</script>

<style></style>

Như bạn có thể thấy trong ví dụ trên, các thành phần cũng bao gồm các thẻ <template> , <script> và <style> , giống như tệp App.vue chính của chúng ta.

Thêm thành phần

Lưu ý rằng thẻ <script> trong ví dụ trên bắt đầu bằng export default . Điều này có nghĩa là đối tượng chứa các thuộc tính dữ liệu có thể được nhận hoặc được nhập vào một tệp khác. Chúng tôi sẽ sử dụng điều này để triển khai thành phần FoodItem.vue vào dự án hiện tại của mình bằng cách nhập nó bằng tệp main.js

Đầu tiên, viết lại dòng cuối cùng thành hai dòng trong tệp main.js ban đầu của bạn:

 import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Bây giờ, hãy thêm thành phần FoodItem.vue bằng cách chèn dòng 4 và 7 vào tệp main.js của bạn:

 import { createApp } from 'vue'

import App from './App.vue'
import FoodItem from './components/FoodItem.vue'

const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')

Ở dòng 7, thành phần này được thêm vào để chúng ta có thể sử dụng nó làm thẻ tùy chỉnh <food-item/> bên trong thẻ <template> trong tệp App.vue như thế này:

 <template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style></style>

Và hãy thêm một số kiểu dáng bên trong thẻ <style> trong tệp App.vue . Đảm bảo máy chủ phát triển đang chạy và kiểm tra kết quả.

 <template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Thành phần riêng lẻ

Một thuộc tính rất hữu ích và mạnh mẽ khi làm việc với các thành phần trong Vue là chúng ta có thể làm cho chúng hoạt động riêng lẻ mà không cần phải đánh dấu các thành phần bằng ID duy nhất như chúng ta phải làm với JavaScript đơn giản. Vue tự động xử lý từng thành phần riêng lẻ.

Hãy làm cho các phần tử <div> được tính khi chúng ta nhấp vào chúng.

Điều duy nhất được thêm vào tệp ứng dụng chính App.vue của chúng tôi là trong CSS để con trỏ trông giống như một bàn tay đang trỏ trong khi di chuột để ngụ ý rằng có một số loại chức năng nhấp chuột.

 #app > div:hover {
  cursor: pointer;
}

Trong tệp thành phần FoodItem.vue chúng ta phải thêm thuộc tính dữ liệu count , trình xử lý lượt nhấp vào phần tử <div> , một phương thức để chạy khi lượt nhấp xảy ra để tăng bộ đếm và phép nội suy văn bản {{}} để hiển thị số lượng.

 <template>
  <div v-on:click="countClicks">
    <h2>{{ name }}</h2>  
    <p>{{ message }}</p>
    <p id="red">You have clicked me {{ clicks }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples',
      clicks: 0
    }
  },
  methods: {
    countClicks() {
      this.clicks++;
    }
  }
}
</script>

<style>
  #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
  }
</style>

Chúng tôi không phải xác định ID duy nhất hoặc thực hiện thêm bất kỳ công việc nào để Vue xử lý việc đếm riêng cho từng phần tử <div> , Vue chỉ tự động thực hiện việc này.

Nhưng ngoại trừ các giá trị bộ đếm khác nhau thì nội dung của phần tử <div> vẫn giống nhau. Trong trang tiếp theo, chúng ta sẽ tìm hiểu thêm về các thành phần để có thể sử dụng các thành phần theo cách hợp lý hơn. Ví dụ: sẽ hợp lý hơn nếu hiển thị các loại thực phẩm khác nhau trong mỗi phần tử <div> .

<mẫu>
  <h1>Cá</h1>
  
</template>