javascript - Vue - Passing same data from one component to many component -

i have following code.

main.js

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

app.vue

<template>   <div id="app">     // not pass data component     <basics :resume="resume"></basics>     <education :resume="resume"></education>     // gets value json file     {{resumedata.name}}     {{resumedata.education}}   </div> </template>  <script>  import basics './components/basics.vue' import education './components/education.vue' import resume '../resume.json'  export default {   name: 'app',   data() {     return {       resumedata: resume     }   },   components: {     basics,     education   } } </script> 

/components/basics.vue

<template>     <div>         <p>basics</p>         // not value json file         {{resumedata.name}}     </div> </template> 

/components/education.vue

<template>     <div>         <p>education</p>         {{resumedata.education}}     </div> </template> 

how pass data 1 component such different vue components reading data same json file without inserting code import resume '../resume.json in each component?

i hope understand question.

a more common / standard way use props. or have import json in components.

if have many components , don't want pass same prop several times, there tricky solution: inject data vue.prototype globally:

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

with this, components can access via this.$resume. use wisely.

if have other similar cases, should go vuex.