บทที่ 19: การสร้าง Component ที่ซับซ้อนและการจัดการ Dependency ระหว่าง Component

1. Component ที่ซับซ้อนคืออะไร?

Component ที่ซับซ้อนใน Vue.js คือ Component ที่มีโครงสร้างซับซ้อนหรือการทำงานร่วมกับ Component อื่น ๆ เช่น การส่งข้อมูลระหว่าง Parent และ Child Component หรือการใช้ Event และ Props เพื่อจัดการข้อมูล

2. การส่งข้อมูลจาก Parent ไปยัง Child ด้วย Props

ตัวอย่าง:

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent title="Hello from Parent!" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>

คำอธิบาย:

ใช้ props ใน Child Component เพื่อรับค่าจาก Parent Component

3. การส่งข้อมูลจาก Child ไปยัง Parent ด้วย Event

ตัวอย่าง:

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent @send-data="handleData" />
    <p>Received Data: {{ data }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      data: ''
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleData(payload) {
      this.data = payload;
    }
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <button @click="sendData">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('send-data', 'Hello Parent!');
    }
  }
};
</script>

คำอธิบาย:

ใช้ $emit ใน Child Component เพื่อส่ง Event และข้อมูลไปยัง Parent Component

4. การสื่อสารระหว่าง Sibling Component ด้วย Event Bus

การตั้งค่า Event Bus:

// eventBus.js
import { createApp } from 'vue';
const eventBus = createApp({});
export default eventBus;

ตัวอย่างการใช้งาน:

// SiblingOne.vue
<template>
  <div>
    <h2>Sibling One</h2>
    <button @click="sendMessage">Send Message to Sibling Two</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.config.globalProperties.$emit('message', 'Hello from Sibling One!');
    }
  }
};
</script>

// SiblingTwo.vue
<template>
  <div>
    <h2>Sibling Two</h2>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    eventBus.config.globalProperties.$on('message', msg => {
      this.message = msg;
    });
  }
};
</script>

คำอธิบาย:

ใช้ Event Bus เพื่อส่งข้อมูลระหว่าง Sibling Component โดยไม่ต้องผ่าน Parent Component

5. การใช้ Provide และ Inject สำหรับ Dependency ระหว่าง Component

ตัวอย่าง:

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      sharedData: 'Data from Parent'
    };
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>

คำอธิบาย:

ใช้ provide ใน Parent Component เพื่อส่งข้อมูล
ใช้ inject ใน Child Component เพื่อรับข้อมูล

6. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

การส่งข้อมูลระหว่าง Parent และ Child ด้วย Props และ Event
การสื่อสารระหว่าง Sibling Component ด้วย Event Bus
การใช้ Provide และ Inject เพื่อจัดการ Dependency ระหว่าง Component

ในบทถัดไป เราจะศึกษาการใช้ Vuex เพื่อจัดการ State ในแอปพลิเคชันที่ซับซ้อน!