Data Transfer from Parent to Child Components

Data is passed down the component hierarchy using props. The parent component binds the data to custom attributes on the child component, which then defines the props it expects to receive.

Parent Component Example

<template>
  <div>
    <UserProfile
      :user-data="currentUser"
      :access-level="userLevel"
    />
  </div>
</template>

<script>
import UserProfile from './components/UserProfile.vue';

export default {
  components: { UserProfile },
  data() {
    return {
      currentUser: {
        id: 42,
        username: 'dev_admin'
      },
      userLevel: 'editor'
    };
  }
};
</script>

Child Component Example

<template>
  <div class="profile-card">
    <h2>{{ userData.username }}</h2>
    <p>Status: {{ accessLevel }}</p>
  </div>
</template>

<script>
export default {
  props: {
    userData: {
      type: Object,
      required: true
    },
    accessLevel: {
      type: String,
      default: 'viewer'
    }
  }
};
</script>

Event Emission from Child to Parent

To send data back up, child components use custom events. The child emits an event with a payload, and the parent listens for that event to update its state.

Child Component Implementation

<template>
  <button @click="sendUpdate">
    Notify Parent
  </button>
</template>

<script>
export default {
  methods: {
    sendUpdate() {
      const payload = { timestamp: Date.now(), status: 'active' };
      this.$emit('status-update', payload);
    }
  }
};
</script>

Parent Component Handler

<template>
  <div>
    <UserProfile
      :user-data="currentUser"
      @status-update="handleStatusChange"
    />
    <p>Last Update: {{ lastUpdate }}</p>
  </div>
</template>

<script>
import UserProfile from './components/UserProfile.vue';

export default {
  components: { UserProfile },
  data() {
    return {
      currentUser: { name: 'Alice' },
      lastUpdate: 'None'
    };
  },
  methods: {
    handleStatusChange(eventPayload) {
      this.lastUpdate = eventPayload.timestamp;
      console.log('New status:', eventPayload.status);
    }
  }
};
</script>

Centralized State Management with Vuex

For complex applications where props and events become cumbersome, Vuex offers a centralized state management pattern. Data is stored in a state object, modified synchronously via mutations, and asynchronously via actions.

Store Configuration

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isLoading: false,
    items: []
  },
  getters: {
    getItemCount: (state) => state.items.length,
    getLoadingState: (state) => state.isLoading
  },
  mutations: {
    SET_LOADING(state, status) {
      state.isLoading = status;
    },
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    async fetchItems({ commit }) {
      commit('SET_LOADING', true);
      // Simulate API call
      setTimeout(() => {
        commit('ADD_ITEM', { id: 1, name: 'New Item' });
        commit('SET_LOADING', false);
      }, 1000);
    }
  }
});

Accessing Store in Components

While you can access the store directly via this.$store, using helper functions simplifies mapping state, getters, and actions to component properties.

<template>
  <div>
    <div v-if="isLoading">Loading data...</div>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="fetchItems">Reload Items</button>
    <p>Total Items: {{ itemCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    // Map state properties directly
    ...mapState(['isLoading', 'items']),
    // Map getters as computed properties
    ...mapGetters(['getItemCount'])
  },
  methods: {
    // Map actions to methods
    ...mapActions(['fetchItems'])
  },
  created() {
    this.fetchItems();
  }
};
</script>