组件访问-子访问父$parent-访问根组件$root

最新推荐文章于 2024-05-03 21:05:41 发布

指尖钢琴家

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量206

点赞数

文章标签： javascript css3 es6 vue.js html5

本文链接：https://blog.csdn.net/qq1547511739/article/details/106277359

版权

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

可以通过$root访问孙组件

<body>
    <div id="opp">        
        <cpn></cpn>   
    </div>
</body>

<template id="app">
    <div>
        <h2>我是cpn组件</h2>
        <button @click='butclick'>按钮</button>
        <ccpn></ccpn>
    </div>
</template>

<template id="bpp">
    <div>
        <h2>这是孙组件</h2>
        <button @click='butclickss'>按钮</button>
    </div>
</template>

<script>
    const opp = new Vue({
        el:'#opp',
        data:{
            message:'你好啊'
        },
        //子组件
        components:{
            cpn:{
                template:`#app`,
                methods:{
                butclick(){
                    //访问父组件
                    console.log(this.$parent.message); 
                    },  
                }, 
                data(){
                    return{
                        name:'这是cpn组件的name'
                    }
                },
               //孙组件
                components:{
                    ccpn:{
                        template:`#bpp`,
                        methods:{
                            butclickss(){
                               // console.log(this.$parent.name)
                               //访问根组件
                               console.log(this.$root.message)
                            }
                        }
                    }
                }
            },
        }
    })
</script>

在这里插入图片描述

指尖钢琴家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件访问-子访问父$parent-访问根组件$root

想在子组件中直接访问父组件，可以通过$parent我们允许通过 $parent来访问父组件，但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了可以通过$root访问孙组件<body> <div id="opp"> <cpn></cpn> </div></body><template id="app"> &lt
复制链接

扫一扫