二十二、Vue组件化开发-组件之间的访问-$parent子组件调用父组件数据

在子组件中通过$parent属性获取父组件中的信息，实际开发中并不常用。

本篇的重点就是记住$parent属性并学会使用。

<div id="app">
    <com1></com1>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{

        },
        // vue实例的子组件
        components:{
            com1:{
                template:`<div>我是子组件A <comb></comb></div>`,
                data () {
                    return {
                        title:'我是子组件1的标题'
                    }
                },
                methods:{
                    getCom1Say() {
                        console.log('子组件1的方法');
                    }
                },
                // com1组件的子组件
                components:{
                    comb:{
                        template:`<div>我子组件A的子组件B
                            <button @click="getCom1">我是子组件B，我要访问我父数据</button>
                        </div>`,
                        data () {return{}},
                        methods:{
                            getCom1:function(){
                                console.log(this.$parent);
                                console.log(this.$parent.title);
                                // 获取vue根实例信息
                                console.log(this.$root);
                            }
                        }
                    }
                }
            }
        }
    });
</script>

2020-12-05