Giới thiệu về các thành phần Vue

Giới thiệu

Khi phát triển một ứng dụng lớn, bạn nên chia nó thành các thành phần nhỏ hơn để làm cho mã dễ đọc, cấu trúc và bảo trì hơn. Hầu hết những người mới bắt đầu sử dụng Vue đều hiểu ít nhất về khái niệm các thành phần là gì, nhưng họ có thể không hiểu những gì họ có thể và không thể làm một cách đầy đủ.

Trong hướng dẫn này, chúng ta sẽ xem một thành phần trong Vue là gì, nó hoạt động như thế nào, cách truyền dữ liệu và sự kiện qua chúng, v.v.

Thành phần Vue là gì?

Các thành phần là các phiên bản có thể tái sử dụng của các phần tử Vue bao gồm các mẫu, kiểu và phần tử JavaScript. Mỗi thành phần là “thứ riêng của nó”, tương tự như cách mỗi phần tử HTML là “thứ riêng của nó” và cả các thành phần Vue và phần tử HTML đều cho phép chúng tôi sử dụng chúng làm khối xây dựng cho các trang web.

Bạn có thể coi các thành phần Vue là các thành phần HTML được nhúng JavaScript, mà bạn có thể tự xác định và thao tác.

Một ứng dụng Vue điển hình được tạo thành từ nhiều thành phần có thể được sử dụng lại nhiều lần nếu cần.

Ví dụ: một trang web thông thường có các phần xuất hiện trên tất cả các trang – thanh điều hướng, đầu trang, chân trang, v.v. Do đó, việc biến mỗi thành phần này thành một thành phần riêng biệt được coi là một cách thực hành tốt. Bằng cách đó, chúng tôi đang tạo mã có cấu trúc tốt, dễ đọc, có thể tái sử dụng và dễ bảo trì:

Cách tạo một thành phần Vue

Có hai cách cơ bản để tạo một thành phần Vue, tùy thuộc vào cách dự án của chúng tôi được tạo – có hoặc không có thiết lập bản dựng. Trong trường hợp đầu tiên, mọi thành phần được lưu trữ trong một tệp riêng biệt. Trong trường hợp thứ hai, có thể có nhiều thành phần trong một tệp.

Tạo các thành phần Vue với thiết lập bản dựng

Hầu hết các dự án được tạo ra bằng cách sử dụng xây dựng thiết lập, cho phép chúng tôi tạo các Thành phần tệp đơn (SFC) – các tệp thành phần chuyên dụng với .vue sự mở rộng. Điều này cho phép chúng tôi đóng gói mẫu, logic và kiểu dáng của thành phần Vue trong một tệp duy nhất:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Tạo các thành phần Vue mà không cần thiết lập bản dựng

Nếu vì bất kỳ lý do gì, bạn không thể sử dụng trình quản lý gói, chẳng hạn như npm để cài đặt Vue trên máy của bạn, bạn vẫn có thể sử dụng Vue trong ứng dụng của mình. Một giải pháp thay thế cho tòa nhà Vue bằng cách sử dụng npm là cài đặt Vue qua một CDN (Mạng phân phối nội dung) trực tiếp trong ứng dụng của bạn. Chúng ta hãy nhanh chóng tìm hiểu cách tạo thành phần Vue này.

Cài đặt Vue mà không cần xây dựng sẽ cho phép chúng tôi sử dụng các chức năng dành riêng cho Vue giống như chúng tôi làm với JavaScript đơn giản. Cú pháp hơi giống với những gì chúng ta đã thấy trong các SFC thông thường:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Trong hướng dẫn này, chúng tôi sẽ sử dụng cú pháp SFC, vì đó là phương pháp tạo thành phần được sử dụng phổ biến nhất.

Cách đăng ký các thành phần trong Vue

Cho đến nay, chúng ta đã biết cách tạo các thành phần trong Vue. Bước tiếp theo sẽ là sử dụng các thành phần này trong một thành phần khác (phân cấp cha-con).

Để làm như vậy, trước tiên chúng ta phải đăng ký các thành phần mà chúng ta muốn sử dụng. Việc đăng ký này đòi hỏi phải nhập và sau đó đăng ký các thành phần. Có hai lựa chọn để làm như vậy – toàn cầu và đăng ký địa phương.

Thành phần Vue – Đăng ký toàn cầu

Các thành phần được đăng ký toàn cầu, như tên gọi của nó, có sẵn trên toàn cầu, có nghĩa là chúng có thể được sử dụng trong bất kỳ thành phần nào trong ứng dụng của chúng tôi mà không cần phải nhập lại chúng. Điều này được thực hiện bằng cách đăng ký một thành phần bằng cách sử dụng app.component() phương pháp:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Trong trường hợp chúng ta có nhiều thành phần, chúng ta có thể chuỗi chúng theo cách này:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Sau khi chúng tôi đã đăng ký các thành phần của mình, chúng tôi có thể sử dụng chúng trong mẫu của bất kỳ thành phần nào trong ứng dụng này bằng cú pháp sau:

<ChildComponent/>
<ProfileComponent/>

Thành phần Vue – Đăng ký cục bộ

Chúng tôi sẽ sử dụng đăng ký cục bộ trong hầu hết các trường hợp vì nó cho phép chúng tôi xác định phạm vi khả dụng của các thành phần đã đăng ký. Nhập các thành phần này và sau đó thêm chúng vào components tùy chọn thực hiện điều này:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Khi đặt tên các thành phần, hãy sử dụng Trường hợp lạc đà để làm rõ rằng đây là một thành phần Vue chứ không phải là một thành phần HTML gốc trong các mẫu. Điều này cũng giúp nhập và đăng ký các thành phần trong JavaScript dễ dàng hơn.

Cách truyền dữ liệu qua các thành phần Vue

Một trong những lợi ích của việc tạo các thành phần là khả năng sử dụng lại mã bằng cách biến nó thành mô-đun.

Giả sử chúng ta đang tạo thành phần hồ sơ người dùng cần nhận dữ liệu của từng học sinh từ trang hồ sơ; trong trường hợp này, chúng tôi phải chuyển dữ liệu này từ thành phần hồ sơ (thành phần chính) sang thành phần hồ sơ người dùng (thành phần con) và chúng tôi sẽ sử dụng đạo cụ.

đạo cụ

Props là các thuộc tính tùy chỉnh mà chúng ta có thể đăng ký trên một thành phần, vì vậy chúng ta có thể truyền dữ liệu từ thành phần cha sang thành phần con bằng cách sử dụng props tùy chọn trong thẻ script:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Slots

Vị trí Vue là không gian dành riêng cho phép chúng tôi chuyển bất kỳ loại nội dung nào từ thành phần này sang thành phần khác. Điều này cho phép kiểm soát tập trung hơn props bởi vì, không giống như props, component cha kiểm soát nội dung bên trong component con. Ví dụ: chúng ta có thể tạo nút sau:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Sau đó, chúng tôi có thể sử dụng thành phần này ở bất cứ đâu chúng tôi muốn và cung cấp cho nó nội dung mà chúng tôi mong muốn. Việc không cung cấp nội dung cho nó có nghĩa là nó sẽ sử dụng giá trị mặc định mà chúng tôi đã cung cấp cho nó (Click Me):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Cách phát ra sự kiện từ các thành phần Vue

Chúng tôi đã học được rằng các đạo cụ được sử dụng để gửi dữ liệu từ thành phần cha xuống thành phần con. Nhưng chúng ta có thể thắc mắc liệu có cách nào để gửi thứ gì đó từ thành phần con đến thành phần cha hay không. Và câu trả lời là Vâng, các sự kiện cũng có thể được gửi từ thành phần con đến thành phần cha.

Giả sử chúng ta có một thành phần cha mẹ (App.vue) có chứa một thành phần con duy nhất (MyBlogPost.vue). Hơn nữa, thành phần con chứa một nút được cho là thay đổi tiêu đề.

Giả sử chúng ta muốn thay đổi tiêu đề của trang khi nhấp vào nút, để chức năng được kích hoạt:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Và thành phần con sẽ trông như thế này:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Kết luận

Trong hướng dẫn này, chúng ta đã học cách làm việc với các thành phần trong Vue, điều cần thiết cho bất kỳ ai sử dụng Vue. Chúng tôi cũng đã học cách gửi và nhận dữ liệu cũng như cách phát ra các sự kiện.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://stackabuse.com/introduction-to-vue-components/