Components ใน Vue.js เป็นองค์ประกอบสำคัญที่ช่วยให้คุณสามารถแยกและสร้างส่วนย่อยของหน้าเว็บแอปพลิเคชันของคุณให้มีความโครงสร้างและสามารถนำไปใช้ซ้ำได้ง่าย นี่คือขั้นตอนการสร้างและใช้งาน Components ใน Vue.js:
สร้าง Component: เริ่มต้นโดยการสร้าง Component ใหม่ สามารถสร้าง Component ในไฟล์ .vue หรือในโฟลเดอร์ที่เฉพาะเจาะจงให้ Component นั้น ๆ สามารถนำเข้าและใช้งานได้ง่าย เช่น:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!-- MyComponent.vue -->
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
props: {
title: String,
content: String,
},
};
</script>
<style scoped>
/* สไตล์สำหรับ Component นี้ */
</style>ในตัวอย่างนี้เราสร้าง Component ที่ชื่อว่า
MyComponentซึ่งรับtitleและcontentเป็น props จาก parent component หรือหน้าเว็บที่นำไปใช้งาน.นำเข้าและใช้งาน Component: เมื่อคุณสร้าง Component แล้ว คุณสามารถนำเข้าและใช้งานในหน้าเว็บหรือ Component หลักของคุณ ในที่นี้เราจะใช้ Component
MyComponentในหน้าเว็บหลัก:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!-- App.vue -->
<template>
<div>
<h1>Hello Vue.js App</h1>
<my-component title="Component Title" content="Component Content"></my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
'my-component': MyComponent,
},
};
</script>
<style>
/* สไตล์สำหรับหน้าเว็บหลัก */
</style>ในตัวอย่างนี้เรานำเข้า
MyComponentและใช้งาน<my-component>ใน template ของหน้าเว็บ App.vue.ส่งข้อมูลผ่าน Props: คุณสามารถส่งข้อมูลจาก parent component ไปยัง child component ผ่าน props เช่นในตัวอย่างข้างบน เราส่ง
titleและcontentจาก parent ไปยังMyComponent.
Components ใน Vue.js ช่วยให้โครงสร้างของโปรเจกต์ของคุณมีความโปร่งใสและง่ายต่อการบำรุงรักษา และสามารถนำไปใช้งานซ้ำได้ในหลายส่วนของแอปพลิเคชันของคุณได้.