VueJS - Components: Building Blocks of Modern Web Applications

Xin chào các nhà法师 Vue.js tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầyExciting vào thế giới các thành phần Vue.js. Là một ai đó đã dạy lập trình trong nhiều năm, tôi có thể告诉 bạn rằng việc hiểu các thành phần giống như học cách sử dụng các khối LEGO - một khi bạn đã nắm vững, bạn có thể xây dựng những điều kỳ diệu! Hãy cùng nhau lặn sâu và vui vẻ!

What Are Vue.js Components?

Các thành phần là trái tim và linh hồn của các ứng dụng Vue.js. Hãy tưởng tượng chúng như những mảnh mã có thể tái sử dụng, bao gồm HTML, CSS và JavaScript. Giống như bạn có thể sử dụng các mảnh LEGO khác nhau để xây dựng một lâu đài, bạn có thể sử dụng các thành phần khác nhau để xây dựng một ứng dụng web phức tạp.

Dưới đây là một ví dụ đơn giản về một thành phần Vue:

<template>
<div class="greeting">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
data() {
return {
message: "Hello, Vue Component!"
}
}
}
</script>

<style scoped>
.greeting {
color: blue;
}
</style>

Hãy phân tích nó:

1. Phần <template> chứa cấu trúc HTML của thành phần chúng ta.
2. Phần <script> xác định logic và dữ liệu của thành phần.
3. Phần <style> (với thuộc tính scoped) chứa CSS chỉ áp dụng cho thành phần này.

Creating and Using Components

Bây giờ chúng ta đã biết thành phần trông như thế nào, hãy tạo một thành phần và sử dụng nó trong ứng dụng của chúng ta!

Step 1: Create a New Component

Tạo một tệp mới có tên Greeting.vue trong thư mục components của dự án bạn:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ greeting }}</h2>
</div>
</template>

<script>
export default {
data() {
return {
greeting: "Welcome to Vue.js!"
}
}
}
</script>

<style scoped>
.greeting {
font-style: italic;
color: green;
}
</style>

Step 2: Use the Component in Your App

Bây giờ, hãy sử dụng thành phần này trong tệp App.vue chính:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting />
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'

export default {
name: 'App',
components: {
Greeting
}
}
</script>

Đây là những gì đang xảy ra:

1. Chúng ta nhập thành phần Greeting.
2. Chúng ta đăng ký nó trong tùy chọn components của thành phần App.
3. Chúng ta sử dụng nó trong mẫu với thẻ <Greeting />.

Và voilà! Bạn vừa tạo ra và sử dụng thành phần Vue đầu tiên của mình!

Props: Passing Data to Components

Props giống như những ống神奇的 cho phép bạn gửi dữ liệu từ thành phần cha đến thành phần con. Hãy cải thiện thành phần Greeting của chúng ta để nó chấp nhận một thông điệp tùy chỉnh:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ customGreeting }}</h2>
</div>
</template>

<script>
export default {
props: ['message'],
computed: {
customGreeting() {
return `${this.message} Welcome to Vue.js!`
}
}
}
</script>

Bây giờ, chúng ta có thể sử dụng nó như này trong App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting message="Hello, dear student!" />
<Greeting message="Greetings, Vue enthusiast!" />
</div>
</template>

Đây có phải không tuyệt vời? Chúng ta có thể sử dụng cùng một thành phần với các thông điệp khác nhau!

Emitting Events: Child-to-Parent Communication

Trong khi props cho phép giao tiếp từ cha đến con, sự kiện cho phép giao tiếp từ con đến cha. Giống như một đứa trẻ xin ice cream từ cha mẹ!

Hãy tạo một thành phần Button phát ra một sự kiện khi được nhấp:

<!-- Button.vue -->
<template>
<button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('button-clicked', 'The button was clicked!')
}
}
}
</script>

Bây giờ, hãy sử dụng nó trong App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Button label="Click me!" @button-clicked="handleButtonClick" />
<p>{{ message }}</p>
</div>
</template>

<script>
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Button
},
data() {
return {
message: ''
}
},
methods: {
handleButtonClick(msg) {
this.message = msg
}
}
}
</script>

Khi nút được nhấp, nó phát ra một sự kiện mà thành phần cha lắng nghe và phản hồi. Giống như một cuộc trò chuyện harmonious trong gia đình!

Slots: Flexible Component Content

Slots giống như những vị trí giữ chỗ trong thành phần của bạn mà bạn có thể điền bất kỳ nội dung nào bạn muốn. Chúng vô cùng hữu ích cho việc tạo ra các thành phần linh hoạt, tái sử dụng.

Hãy tạo một thành phần Card với một slot:

<!-- Card.vue -->
<template>
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
props: ['title']
}
</script>

<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.card-header {
background-color: #f1f1f1;
padding: 5px;
}
</style>

Bây giờ chúng ta có thể sử dụng thành phần Card với nội dung khác nhau:

<!-- App.vue -->
<template>
<div id="app">
<Card title="Welcome">
<p>Welcome to our Vue.js tutorial!</p>
</Card>
<Card title="About Components">
<ul>
<li>Components are reusable</li>
<li>They can have props</li>
<li>They can emit events</li>
</ul>
</Card>
</div>
</template>

<script>
import Card from './components/Card.vue'

export default {
name: 'App',
components: {
Card
}
}
</script>

Dynamic Components

Các thành phần động cho phép bạn chuyển đổi giữa các thành phần khác nhau một cách linh hoạt. Giống như có một cây kéo đa năng của các thành phần!

Hãy tạo một ví dụ đơn giản:

<!-- App.vue -->
<template>
<div id="app">
<button @click="currentComponent = 'Greeting'">Show Greeting</button>
<button @click="currentComponent = 'Button'">Show Button</button>
<component :is="currentComponent"></component>
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Greeting,
Button
},
data() {
return {
currentComponent: 'Greeting'
}
}
}
</script>

Trong ví dụ này, chúng ta sử dụng phần tử <component> với thuộc tính is để hiển thị thành phần Greeting hoặc Button tùy thuộc vào nút nào được nhấp.

Conclusion

Chúc mừng! Bạn vừa bước những bước đầu tiên vào thế giới kỳ diệu của các thành phần Vue.js. Nhớ rằng, giống như bất kỳ kỹ năng nào, thực hành làm nên hoàn hảo. Đừng ngại thử nghiệm và xây dựng các thành phần của riêng bạn. Trước khi bạn biết, bạn sẽ tạo ra các ứng dụng web phức tạp, tương tác một cách dễ dàng!

Dưới đây là bảng tham khảo nhanh các tính năng thành phần chúng ta đã涵盖:

Feature	Description
Basic Structure	Template, Script, and Style sections
Props	Pass data from parent to child
Events	Communication from child to parent
Slots	Flexible content placeholders
Dynamic Components	Switch between components on the fly

Tiếp tục lập mã, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với Vue.js!

Credits: Image by storyset