Example Project: Data Sharing in Vue 3

This project demonstrates various techniques for passing data between components in Vue 3 using Vite. The main goal is to provide clear examples of the following data-sharing methods:

1. Parent to Child
2. Child to Parent
3. Global State for Multiple Components

---

Tools and Methods Used

• Vue Composition API
  • inject / provide
  • ref
  • emit
  • Handling props

---

Components

The project consists of the following components:

• App.vue: The global root component.
• ComponentA.vue: A child of App.
• ComponentAA.vue: A child of ComponentA.
• ComponentAB.vue: A sibling of ComponentAA, also a child of ComponentA.

Component Hierarchy

App.vue
├── ComponentA.vue
│   ├── ComponentAA.vue
│   └── ComponentAB.vue

---

Data Sharing Techniques

1. Passing Data from Parent to Child

This is achieved using props. The parent component passes data to its child as a property.

Example in App.vue:

<script setup>
import ComponentA from './components/ComponentA.vue';

const messageToA = 'Hello from App!';
</script>

<template>
  <ComponentA :message="messageToA" />
</template>

In ComponentA.vue:

<script setup>
import { defineProps } from 'vue';

defineProps(['message']);
</script>

<template>
  <p>{{ message }}</p>
</template>

2. Passing Data from Child to Parent

This is achieved using events and emit.

In ComponentAA.vue:

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateParent']);

function sendToParent() {
  emit('updateParent', 'Data from ComponentAA');
}
</script>

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

In ComponentA.vue:

<script setup>
function handleUpdate(data) {
  console.log('Received from ComponentAA:', data);
}
</script>

<template>
  <ComponentAA @updateParent="handleUpdate" />
</template>

3. Global State for Multiple Components

This is achieved using provide and inject.

In App.vue:

<script setup>
import { provide, ref } from 'vue';
import ComponentA from './components/ComponentA.vue';

const globalMessage = ref('Shared Message');
provide('globalMessage', globalMessage);
</script>

<template>
  <ComponentA />
</template>

In ComponentA.vue:

<script setup>
import { inject } from 'vue';
import ComponentAA from './ComponentAA.vue';
import ComponentAB from './ComponentAB.vue';

const globalMessage = inject('globalMessage');
</script>

<template>
  <p>Global Message: {{ globalMessage }}</p>
  <ComponentAA />
  <ComponentAB />
</template>

---

Installation and Execution

1. Clone the repository:

   git clone [email protected]:guduchango/vue3-components-data-share.git
   cd vue3-components-data-share

2. Install dependencies:

   npm install

3. Run the project:

   npm run dev

4. Open in your browser:

   http://localhost:5173
   

---

Resources

• Vue 3 Documentation
• Vite Documentation

---

Contributions

Contributions are welcome! Feel free to fork the repository and submit a pull request.

---

License

MIT License. This project is open for use and modification under the terms of the MIT license.