Vue - 1つのコンポーネントから多くのコンポーネントに同じデータを渡す

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コンポーネントは、各コンポーネントのコードimport Resume from '../resume.jsonを挿入することなく、同じJSONファイルからデータを読み取っていることを別のそのような1つのコンポーネントからデータを渡しますか？

私の質問を理解していただければ幸いです。

Answer 1

より一般的な/標準的な方法は、ちょうど使用する小道具です。または、すべてのコンポーネントでjsonをインポートする必要があります。

あなたは多くのコンポーネントを持っており、実際には同じ小道具、数回に合格したくない場合は、トリッキーな解決策があります：グローバルVue.prototypeにデータを挿入：これで

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

を、すべてのコンポーネントはthis.$resumeでアクセスできます。しかしそれを賢明に使ってください。

他の同様のケースがある場合は、おそらくvuexに行ってください。

Answer 2

vue.jsコースでは、これを3通りの方法で解決できます。

基礎と教育におけるデータを渡す
1. 使用の小道具
2. Vuex
3. イベントボックス