31. 父子组件的访问方式： $parent-$root

最新推荐文章于 2023-06-09 10:42:22 发布

咸瑜

最新推荐文章于 2023-06-09 10:42:22 发布

阅读量91

点赞数

文章标签：前端 javascript java servlet vue.js

本文链接：https://blog.csdn.net/m0_46268961/article/details/125376157

版权

说了父组件直接访问子组件，现在讲子组件访问父组件:

有这么个代码：

<body>
    <template id="cpn">
            <div style="border: solid red 2px ">
                    <h2>这里是 cpn</h2>
                    <v-ccpn></v-ccpn>
            </div>
    </template>

    <template id="ccpn">
        <div style="border: solid blue 1px ">
            <h2>这里是 ccpn</h2>
        </div>
    </template>

    <div id="app">
        <v-cpn></v-cpn>
    </div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            app_s1:"却看见更黑暗的家伙(app_s1)"
        },
        methods:{

        },
        components:{
            'v-cpn':{
                template:"#cpn",
                data(){
                    return{cpn_s1:"负重一万斤长大(cpn_s1)"}
                },
                components:{
                    'v-ccpn':{
                        template: "#ccpn",
                        data() {
                            return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"}
                        }
                    }
                }
            }

        }
    })
</script>

View Code

界面：

解析： VUE 实例 app 是跟组件 =》 cpn子组件 =》 ccpn 组件

换句话：爷组件=》父组件 =》子组件

那么如果子组件要访问父组件的数据我们也不用事件传递，直接用：$parent

使用例子：

<body>
    <template id="cpn">
            <div style="border: solid red 2px ">
                    <h2>这里是 cpn</h2>
                    <v-ccpn></v-ccpn>
            </div>
    </template>

    <template id="ccpn">
        <div style="border: solid blue 1px ">
            <h2>这里是 ccpn</h2>
            <button @click="parent_data_s1">点击直接显示父组件cpn的data中的 s1</button>
        </div>
    </template>

    <div id="app">
        <v-cpn></v-cpn>
    </div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            app_s1:"却看见更黑暗的家伙(app_s1)"
        },
        components:{
            'v-cpn':{
                template:"#cpn",
                data(){
                    return{cpn_s1:"负重一万斤长大(cpn_s1)"}
                },
                components:{
                    'v-ccpn':{
                        template: "#ccpn",
                        data() {
                            return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"}
                        },
                        methods:{
                            parent_data_s1(){                       //主要看这个函数  贼方便哈！
                                alert(this.$parent.cpn_s1);
                            }
                        }
                    }
                }
            }

        }
    })
</script>

View Code

别怕你看图就看懂了他的嵌套然后慢慢思维跟进然后分析即可。

可以看到很方便直接即可访问自己的父组件。

但是还是有弊端的：

尽管在Vue开发中，我们允许通过$parent 来访问父组件，但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。因为我们说组件都独立的。

因为：我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。

注意：

1. $parent 没有下标形式，因为总不可能你有几个爸爸吧，为什么$children可以？因为你可以有多个孩子。

2.可以看到这里的button 直接访问 ccpn 的方法，是怎么做到的，因为button定义在 ccpn中,这些是细节，也是基础吧.

还有一个讲完即可：

this.$root 他是直接访问根组件比如上面写的那么他就直接访问 vue实例了。

使用例：

<body>
    <template id="cpn">
            <div style="border: solid red 2px ">
                    <h2>这里是 cpn</h2>
                    <v-ccpn></v-ccpn>
            </div>
    </template>

    <template id="ccpn">
        <div style="border: solid blue 1px ">
            <h2>这里是 ccpn</h2>
            <button @click="root_data_s1">点击直接显示根组件vue实例的data中的 s1</button>
        </div>
    </template>

    <div id="app">
        <v-cpn></v-cpn>
    </div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            app_s1:"却看见更黑暗的家伙(app_s1)"
        },
        components:{
            'v-cpn':{
                template:"#cpn",
                data(){
                    return{cpn_s1:"负重一万斤长大(cpn_s1)"}
                },
                components:{
                    'v-ccpn':{
                        template: "#ccpn",
                        data() {
                            return{ccpn_s1:"我想在那里最蓝的大海杨帆(ccpn_s1)"}
                        },
                        methods:{
                            root_data_s1(){                       //主要看这个函数  贼方便哈！
                                alert(this.$root.app_s1);
                            }
                        }
                    }
                }
            }

        }
    })
</script>

View Code

$root 在哪里可以被访问，因为他是根组件啊哈哈。

咸瑜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
31. 父子组件的访问方式： $parent-$root

说了父组件直接访问子组件，现在讲子组件访问父组件:有这么个代码：<body> <template id="cpn"> <div style="border: solid red 2px "> <h2>这里是 cpn</h2> ...
复制链接

扫一扫