<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent @message-sent="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message); // Output: Hello from child
    }
  }
}
</script>

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    changeMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

// ParentComponent.vue
<template>
  <div>
    {{ message }}
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['getMessage']),
    message() {
      return this.getMessage;
    }
  },
  methods: {
    ...mapActions(['changeMessage'])
  }
}
</script>