vue - $root

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

Vue.component('root-obj', {
    data() {
        return {
                    msg: '我是子组件'
        }
    },
    template: `

                    子组件
                    
                
`,
    methods: {
        getRoot() {
            console.log(this.msg)
            console.log(this.$parent.msg)
            console.log(this.$root.msg)           
        }
    }
})
Vue.component('child-component', {
    data() {
        return {
                    msg: '我是子子组件'
        }
    },
    template: `

                子子组件
                
`,
    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')

在线运行