Data Access to other components

I have uploaded my project to a sandbox here Project Sandbox

i Have added this to my home file but i need it to open/update when i click a link inside another componet "<projectList.vue> " and to close when i click the X in the <projectDrawer.vue> componet. any help would be great im a newb.


        transform: drawerVisible ? 'none' : 'translate3d(100%, 0, 0)',

import projectDrawer from "@/components/projectDrawer.vue";

export default {
data() {
    return {
      drawerVisible: false,


 <a class="pj" @click="drawerVisible = true">


        class="drawer__close closer"
          transform: drawerVisible ? 'translate3d(100%, 0, 0)' : 'none',
        @click="drawerVisible = false"
      > X </span>

If I understand the question correctly,…

  • Parent Component: HOME.vue
  • Child Component: proejctList.vue, proejctDrawer.vue

In first, you need to define data to communicate with components.

Parent => Child (props)

  • HOME.vue => projectDrawer.vue : drawerVisible

Child => Parent (custom event)

  • projectDrawer.vue => HOME.vue : Whether a close event has occurred
  • projectList.vue => HOME.vue : Whether a click link event has occurred

and then You can create a one-way data flow using custom events and props.

[props] (Props — Vue.js)
[custom-event] (Custom Events — Vue.js)