vue 基础 子访问父-parent-root

vue组件访问 子访问父-parent-root

       <div id="app">
            <cpn></cpn>
        </div>
        <template id="cpn">
            <div>
                <h2>我是cpn组件</h2>
                <ccpn></ccpn>
            </div>
        </template>

        <template id="ccpn">
            <div>
                <h2>我是子组件</h2>
                <button @click="btnClick">按钮</button>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好",
                },
                components: {
                    cpn: {
                        template: "#cpn",
                        data(){
                            return{
                                name:'我是cpn组件的name'
                            }
                        },
                        components: {
                            ccpn: {
                                template: "#ccpn",
                                methods: {
                                    btnClick() {
                                        //1.访问父组件
                                        console.log(this.$parent);
                                        console.log(this.$parent.name);
                                        //2.访问根组件
                                        console.log(this.$root);
                                        console.log(this.$root.message);
                                    },
                                },
                            },
                        },
                    },
                },
            });
        </script>

说明:
1.定义子组件并在app中使用子组件
2.个子组件绑定一个点击事件
3.在子组件中事件这个点击事件
4.用this.$parent访问父组件的名字信息5.用this.$root访问父组件的名字信息

 btnClick() {
      //1.访问父组件
      console.log(this.$parent);
      console.log(this.$parent.name);
      //2.访问根组件
      console.log(this.$root);
      console.log(this.$root.message);
 },