Vuejs在组件之间共享数据

时间:2018-01-29 21:46:45

标签: javascript vue.js

我有两个组成部分:

  • App.vue
  • Sidekick.vue

在我的App.vue组件中,我有一个我希望从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>

我想从myData

访问App.vue(在Sidekick.vue中声明)

我尝试通过以下操作从App.vue内导入Sidekick.vue

Sidekick.vue (错误尝试)

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

我已阅读有关道具的内容 - 但只看到了对子/父组件的引用。在我的情况下,Sidekick.vue显示在App.vue内的div中(不确定这是否为#34;孩子&#34;)。我是否需要以某种方式向myData提供<router-view/>的访问权限?

更新:(显示App.vue和Sidekick.vue之间的关系

index.js (路由器文件)

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

时会显示

/sidekick

3 个答案:

答案 0 :(得分:4)

请记住,经验法则是使用道具以单向流传递数据

  

支持事件,事件向上   https://vuejs.org/v2/guide/components.html#Composing-Components

快速解决方案:

全球活动总线,用于在<App/><Sidekick/>组件之间发布消息。

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

长期解决方案

使用状态管理库(如vuex)更好地将数据封装在一个位置(全局存储),并使用import { mapState, mapMutations } from 'vuex'

从组件树中订阅它

答案 1 :(得分:0)

  

进行亲子沟通时,最好的和推荐的   选项是使用道具和事件。 Read more in Vue docs


  

当想要在多个组件之间共享状态时最好   推荐的方法是使用Vuex


如果您想使用简单的数据共享,则可以使用Vue observable

简单示例::假设您有一个游戏,并且希望许多组件都可以访问这些错误。 (组件可以访问和操纵它)。

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 }
    }
  }
}

Component1中,errors.count是反应性的。因此,如果您有以下模板:

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

点击增加按钮时,您会看到错误不断增加。


如您所料,将errors.js导入另一个组件时,两个组件都可以参与操纵errors.count


注意:即使您可以使用Vue.observable API进行简单的数据共享,也应注意这是一个非常强大的API。例如,阅读Using Vue Observables as a State Store

答案 2 :(得分:0)

App.vue:


<router-view pass_data='myData'/>

Sidekick.vue:


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