VueJS - Components: Building Blocks of Modern Web Applications

您好，未來的 Vue.js 巔峰大師！我很興奮能成為您進入 Vue.js 组件世界的導師。作為一個教了多年編程的人，我可以告訴您，理解组件就像學習使用樂高積木一樣 - 一旦掌握了它，您就能建造令人驚奇的事物！所以，讓我們一起跳進去，開心地學習吧！

VueJS - Components

什麼是 Vue.js 组件？

组件是 Vue.js 應用程序的心臟和靈魂。把它們看作是可重用的代碼片段，它們包含了 HTML、CSS 和 JavaScript 功能。就像您可以用不同的樂高積木來建造一座城堡一樣，您也可以使用不同的组件來建造一個複雜的網頁應用程序。

這裡有一個 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>

讓我們來分析一下：

<template> 部分包含了我們组件的 HTML 構架。
<script> 部分定義了组件的邏輯和數據。
<style> 部分（帶有 scoped 屬性）包含只應用於此组件的 CSS。

創建和使用组件

既然我們知道了组件的樣子，讓我們創建一個並在我們的應用程序中使用它！

步驟 1：創建一個新组件

在您的專案 components 文件夾中創建一個名為 Greeting.vue 的新文件：

<!-- 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>

步驟 2：在您的應用程序中使用组件

現在，讓我們在主 App.vue 文件中使用這個组件：

<!-- 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>

這是發生了什麼：

我們導入了 Greeting 组件。
我們在 App 组件的 components 選項中註冊了它。
我們在模板中使用 <Greeting /> 標籤。

瞧！您剛剛創建並使用了您的第一個 Vue 组件！

Props：向组件傳遞數據

Props 是像魔法的管子一樣，讓您能夠從父组件向子组件傳遞數據。讓我們增強我們的 Greeting 组件以接受一個自定義消息：

<!-- 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>

現在，我們可以在 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>

這不是很棒嗎？我們可以用不同的消息重用同一個组件！

發出事件：子到父通信

雖然 props 讓父组件能夠與子组件通信，但事件讓子组件能夠與父组件通信。這就像孩子請求父母買冰淇淋一樣！

讓我們創建一個在點擊時發出事件的 Button 组件：

<!-- 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>

現在，讓我們在 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>

當按鈕被點擊時，它會發出事件，父组件會聽到並回應。這就像一個和諧的家庭對話！

插槽：灵活的组件内容

插槽就像您组件中的占位符一樣，您可以填充任何您想要的内容。它們對於創建灵活、可重用的组件非常有用。

讓我們創建一個帶有插槽的 Card 组件：

<!-- 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>

現在，我們可以用不同的内容使用這個 Card 组件：

<!-- 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>

动态组件

动态组件讓您能夠在運行時在不同的组件之間切換。這就像擁有一把瑞士軍刀的组件！

讓我們創建一個簡單的例子：

<!-- 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>

在這個例子中，我們使用 <component> 元素和 is 屬性來根據點擊的按鈕動態渲染 Greeting 或 Button 组件。

結論

恭喜您！您剛剛踏入了 Vue.js 组件的奇妙世界。記住，任何技能都需要練習才能達到完美。不要害怕嘗試並建造您自己的组件。在您知道之前，您將能夠輕鬆地創建複雜的互動網頁應用程序！

這裡是一個我們所涵蓋的组件功能的快速參考表：

功能	描述
基本結構	模板、腚本和樣式部分
Props	從父组件向子组件傳遞數據
事件	從子组件向父组件通信
插槽	灵活的內容占位符
动态组件	在運行時切換不同的组件

持續編程，持續學習，最重要的是，在 Vue.js 中玩得開心！

Credits: Image by storyset