vue - $root

parent 都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过root访问得到的是根组件。

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <root-obj></root-obj>
</div>

Vue.component('root-obj', {
    data() {
        return {
                    msg: '我是子组件'
        }
    },
    template: `<div>
                    <button @click='getRoot'>子组件</button>
                    <child-component></child-component>
                </div>`,
    methods: {
        getRoot() {
            console.log(this.msg)
            console.log(this.$parent.msg)
            console.log(this.$root.msg)           
        }
    }
})
Vue.component('child-component', {
    data() {
        return {
                    msg: '我是子子组件'
        }
    },
    template: `<div>
                <button @click='getRoot'>子子组件</button>
                </div>`,
    methods: {
        getRoot() {
            console.log(this.msg)
            console.log(this.$parent.msg)
            console.log(this.$root.msg)            
        }
    }
})

var Main = {
    data() {
      return {
        msg: '我是父组件'
      }
   }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

在线运行