javascript - Vuejs Share Data Between Components - Stack Overflow

admin管理员组

文章数量:1201569

I have two components:

• App.vue
• Sidekick.vue

In my App.vue component, I have a property that I would like to access from Sidekick.vue

App.vue

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

Sidekick.vue

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

I would like access to myData (which is declared in App.vue) from Sidekick.vue

I have tried importing App.vue from within Sidekick.vue by doing something like:

Sidekick.vue (incorrect attempt)

<script>
import App from '@/App'
export default {
  name: 'Sidekick',
  data () {
    return {
      myData: App.myData
    }
  }
}
</script>

I have read about props - but have only seen references to child / parent components. In my case, Sidekick.vue is shown in a div inside App.vue (not sure if this makes it a "child"). Do I need to give access of myData to <router-view/> somehow?

UPDATE: (to show relationship between App.vue and Sidekick.vue

index.js (router file)

import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '@/components/Sidekick',
import FakeComponent from '@/components/FakeComponent'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/fakecomponent'
    },
    {
      path: '/sidekick',
      name: 'Sidekick',
      component: Sidekick
    },
    {
      path: '/fakecomponent',
      name: 'FakeComponent',
      component: FakeComponent
    }
  ]
})

export default router

Sidekick.vue gets rendered when we hit /sidekick

I have two components:

• App.vue
• Sidekick.vue

In my App.vue component, I have a property that I would like to access from Sidekick.vue

App.vue

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

Sidekick.vue

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

I would like access to myData (which is declared in App.vue) from Sidekick.vue

I have tried importing App.vue from within Sidekick.vue by doing something like:

Sidekick.vue (incorrect attempt)

<script>
import App from '@/App'
export default {
  name: 'Sidekick',
  data () {
    return {
      myData: App.myData
    }
  }
}
</script>

I have read about props - but have only seen references to child / parent components. In my case, Sidekick.vue is shown in a div inside App.vue (not sure if this makes it a "child"). Do I need to give access of myData to <router-view/> somehow?

UPDATE: (to show relationship between App.vue and Sidekick.vue

index.js (router file)

import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '@/components/Sidekick',
import FakeComponent from '@/components/FakeComponent'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/fakecomponent'
    },
    {
      path: '/sidekick',
      name: 'Sidekick',
      component: Sidekick
    },
    {
      path: '/fakecomponent',
      name: 'FakeComponent',
      component: FakeComponent
    }
  ]
})

export default router

Sidekick.vue gets rendered when we hit /sidekick

• javascript
• vue.js

Share Improve this question Follow edited Jan 29, 2018 at 22:17 bruh asked Jan 29, 2018 at 21:46 bruhbruh 2,29588 gold badges3333 silver badges4444 bronze badges 8

• "Sidekick.vue is shown in a div inside App.vue" where is your Sidekick used i can't see them on App's template besides route-view, i assume props is the right way to go just want some more context :) – Allen Commented Jan 29, 2018 at 21:57
• 2 With data being shared from parent to child, you should consider using props. If you have multiple nested components and you're passing the same prop values between all of them, or you're trying to share data from child to parent or between siblings reactively, you might want to consider looking into Vuex. I personally don't use Vuex myself, but I don't currently deal with complex enough Vue applications to warrant its use. Since you appear to be developing an SPA, you may find some benefit in using it. – B. Fleming Commented Jan 29, 2018 at 22:00
• Possible duplicate of How to share data between components Vue js – Roy J Commented Jan 29, 2018 at 22:16
• @Xlee I have updated the original question with the relationship between "App" and "Sidekick" – bruh Commented Jan 29, 2018 at 22:18
• See also stackoverflow.com/questions/34607194/… – Roy J Commented Jan 29, 2018 at 22:21

 |  Show 3 more comments

4 Answers 4

Sorted by: Reset to default 9

Just keep in mind, the rule of thumb is using props to pass data in a one-way flow

props down, events up.
https://v2.vuejs.org/v2/guide/components.html#Composing-Components

Quick solution:

Global event bus to post messages between your <App/> and <Sidekick/> components.

https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Long term solution:

Use a state management library like vuex to better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'

When you have parent-child communication, the best and recommended option is to use props and events. Read more in Vue docs

---

When want to have shared state between many components the best and recommended way is to use Vuex.

---

If you want to use simple data sharing you can use Vue observable.

Simple example: Say that you have a game and you want the errors to be accessible by many components. (components can access it and manipulate it).

errors.js

import Vue from "vue";

export const errors = Vue.observable({ count: 0 });

Component1.vue

import { errors } from 'path-of-errors.js'

export default {
  computed: {
    errors () {
      get () { return errors.count },
      set (val) { errors.count = val }
    }
  }
}

In Component1 the errors.count is reactive. So if as a template you have:

<template>
  <div>
    Errors: {{ errors }} 
    <button @click="errors++">Increase</button>
  </div>
</template>

While you click the Increase button, you will see the errors increasing.

---

As you might expect, when you import the errors.js in another component, then both components can participate on manipulating the errors.count.

---

Note: Even though you might use the Vue.observable API for simple data sharing you should be aware that this is a very powerful API. For example read Using Vue Observables as a State Store

App.vue:

---

<router-view pass_data='myData'/>

Sidekick.vue:

---

export default {
  name: "Sidekick",
  props: ["pass_data"],
  created() {
    alert("pass_data: "+this.pass_data)
  }
}

If App.js(Parent) and Sidekick(Child)

App.js

in Template

In script import Sidekick from './Sidekick.vue:

Sidekick.vue

props: ['myData']

now you can access myData anywhere in sidekick. In template myData and in scripts this.myData

本文标签： javascriptVuejs Share Data Between ComponentsStack Overflow