VUE学习之实例属性$root, $parent

Vue 子组件可以通过 $root 属性访问根实例的属性和方法 

Vue 子组件可以通过 $parent属性访问父组件实例的属性和方法

下面写个简单的demo： 

 

 

Vue.component("first-child", {
    data : function () {
        return {
            msg: "first child data"
        }
    },
    template : "",
    methods: {
    }
});

Vue.component("second-child", {
    data : function () {
        return {
            msg: "second child data"
        }
    },
    template : "
this.$root.msg: {{this.$root.msg}}" +
        "
this.parent.msg: {{this.$parent.msg}}
" +
        "
this.msg: {{this.msg}}
",

    methods: {

    }
});


let vue = new Vue({
    el: "#app",
    data: {
        msg: "root data"
    },
    beforeMount : function(){

    },
    computed:{

    },
    methods: {

    }
});

 

运行，在页面中会看到： 

this.$root.msg: root data

this.parent.msg: first child data

this.msg: second child data

 

简单易懂