实例详解vue中的$root和$parent

new Vue({
 data(){
  return{
   loading:true
  }
 },
 router,
 store,
 render: h => h(App)
}).$mount('#app')

created(){
console.log(this.$root.loading) //获取loading的值
}

created(){
this.$root.loading = false; //设置loading的属性
}

<template>
  <div>
    <child>
    </child>
  </div>
</template>
<script> 
  import child from './child';
  export default {
    ponents:{
      child 
    },
    data(){
      return {
        text:"测试"
      }
    },
  }
</script>

<template>
  <div>
    <child>
    </child>
  </div>
</template>
<script> 
  import child from './child';
  export default {
    created(){
    console.log(this.$parent.text)//测试（能够获取到父组件的属性和方法）
   }
  }
</script>