如何在Vuejs中将全局变量从父级传递给子级？

Question

I have a page called Profile.vue which is structured like this,

<style>
</style>
<template>
 <component-1></component-1>
 <component-2></component-3>
 <component-3></component-3>
 </template>
<script>
 import component1 from '...../..'
 import component2 from '...../..'
 import component3 from '...../..'
 export default {
 name: 'profile',
 data(){
    return{
        pagename: 'Profile',
        mydata: 'This is my data'
    }
  }
}
</script>

How do i make the data available in mydata, to all the components that I am importing,ie, how can I pass data that would be available to all the components?

Answer 1

You can use props .

<component-1 v-bind:message="mydata"></component-1>

Then in your child component (directly from the docs):

Vue.component('component-1', {
  // declare the props
  props: ['message'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: '<span>{{ message }}</span>'
})

Answer 2

Rather than using props (which might mean you have to pass around those props a lot) you can access variables using $parent (or $root)

Vue.component('component-1', {
  computed: {
    message: function(){
      // this is how to access the variable inside the component code
      return this.$parent.message;
    },
  },
  // and because of using computed, access it inside the template
  template: '<span>{{ message }}</span>'
})

Answer 3

You just importing some not inherited components, so you can't share data like that. Add components into components field in parent component like here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration Then in child components you can use this.$parent. And this.$parent.mydata in your example