Question

我有以下代码。

main.js

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    // this does not pass the data to the component
    <basics :resume="resume"></basics>
    <education :resume="resume"></education>
    // this gets the value from the json file
    {{resumeData.name}}
    {{resumeData.education}}
  </div>
</template>

<script>

import Basics from './components/Basics.vue'
import Education from './components/Education.vue'
import Resume from '../resume.json'

export default {
  name: 'app',
  data() {
    return {
      resumeData: Resume
    }
  },
  components: {
    Basics,
    Education
  }
}
</script>

/components/Basics.vue

<template>
    <div>
        <p>Basics</p>
        // this does not get the value from the json file
        {{resumeData.name}}
    </div>
</template>

/components/Education.vue

<template>
    <div>
        <p>Education</p>
        {{resumeData.education}}
    </div>
</template>

如何将数据从一个组件传递到另一个组件，以便所有不同的vue组件都从同一个json文件中读取数据而不在每个组件中插入代码import Resume from '../resume.json？

我希望你理解我的问题。

Answer 1

更常见/标准的方法就是使用道具。或者你必须在所有组件中导入json。

如果您有许多组件并且实际上不想多次传递相同的道具，那么有一个棘手的解决方案：将数据全局注入Vue.prototype：

Vue.prototype.$resume = {
  name: 'foo',
  education: 'bar',
  ...
}

有了这个，您的所有组件都可以通过this.$resume访问它。但明智地使用它。

如果您有其他类似情况，您可能应该选择vuex。

Answer 2

在vue.js课程中，您可以通过3种不同的方式解决这个问题。

使用道具在基础知识和教育中传递数据
Vuex
活动框

Vue - 将相同数据从一个组件传递到多个组件

2 个答案: