Vue父子组件之间属性访问

最新推荐文章于 2024-08-21 18:23:58 发布

bugsayend

最新推荐文章于 2024-08-21 18:23:58 发布

阅读量459

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42707967/article/details/115879063

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue中父子组件之间的属性访问方法，包括父组件如何通过this.$children和this.$refs访问子组件属性，以及子组件如何利用this.$parent和this.$root访问父组件和根组件的属性。详细阐述了$children和$refs的区别，以及使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.父子组件之间属性访问

通常父子组件是可以进行属性访问的，例如父组件调用子组件中的方法，变量等，这些都是可以通过拿到各自对应的父子组件对象，然后调用其属性，例如：
父组件访问子组件中的属性有两种方式

在父组件中使用this.$children拿到所有的子组件数组对象，然后索引访问对应子组件中的方法，变量等属性
通过this.$refs(子组件名称来访问)，这种相比于第一种就是可以通过子组件的具体名称来访问了，避免索引顺序改变问题

1.1 父组件访问子组件（this.$children,this.$refs）

1.$children获取子组件对象列表

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <component1></component1>
            <button @click="btnclick">按钮</button>
        </div>

        <template id="content">
            <div>
                <span>子组件中的内容</span>
            </div>
        </template>
    
        <script>
            const vm = new Vue({
                el:"#app",
                data:{

                },
                methods:{
                    btnclick(){
                        console.log(this.$children); // this.$children返回的数所有子组件对象的数组
                        this.$children[0].showMessage()
                    }
                },
                components:{
                    component1:{
                        template: '#content',
                        methods:{
                            showMessage(){
                                console.log("打印子组件中的showMessage函数");
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

在浏览器控制台我们可以看到打印结果如下：
在这里插入图片描述
注意点:父组件中调用btnclick（）方法中通过this.$children可以获取所有的子组件对象列表，然后通过索引获取第一个子组件对象调用子组件中的showMessage()方法

2.this.$refs
使用$refs时，首先我们需要给组件添加一个ref属性，然后this.$refs返回一个包含组件名称的对象，然后通过属性名称拿到对应子组件

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <component1 ref="cmp1"></component1>
            <component1 ref="cm2"></component1>
            <component1 ref="cmp3"></component1>
            <button @click="btnclick">按钮</button>
        </div>

        <template id="content">
            <div>
                <span>子组件中的内容</span>
            </div>
        </template>
    
        <script>
            const vm = new Vue({
                el:"#app",
                data:{

                },
                methods:{
                    btnclick(){
                        console.log(this.$refs.cmp1); // this.$refs返回的所有子组件名称对象的对象
                        console.log(this.$refs.cmp1); // 
                        this.$refs.cmp1.showMessage()
                    }
                },
                components:{
                    component1:{
                        template: '#content',
                        methods:{
                            showMessage(){
                                console.log("打印子组件中的showMessage函数");
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

注意点:要使用this. $r e f s 方法时首先要在组件红给子组件添加一个 r e f 属性来区分不同子组件，然后 t h i s .$ refs可以获取到名称为ref的，值为对应组件对象的对象，最后可以通过this.$refs.子组件属性名称.方法来调用子组件中对应属性

1.2 子组件访问父组件属性(this.$parent, this.$root)

上面时父组件获取子组件中的属性，那么子组件也是可以获取父组件对象或跟组件对象的
1.this. $p a r e n t 获取父组件对象并访问属性 2 . t h i s .$ root 获取跟组件对象

this.$parent

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>父子组件访问</title>
        <script src="./vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <span>root组件中的内容</span>
            <component1 ref="cmp1"></component1>
        </div>

        <template id="content">
            <div>
                <span>父组件中component1的内容</span>
                <component2></component2>
            </div>
        </template>

        <template id="content2">
            <div>
                <span>子组件component2中的内容</span>
                <button @click="cmpclick">按钮</button>
            </div>
        </template>
    
        <script>
            const vm = new Vue({
                el:"#app",
                data:{

                },
                methods:{
                },
                components:{
                    component1:{
                        template: '#content',
                        data(){
                            return {name: 'Jack'}
                        },
                        methods:{
                            btnclick(){
                                console.log("打印component1组件中的showMessage函数");
                            }
                        },
                        components:{
                            component2:{
                                template: '#content2',
                                methods:{
                                    cmpclick(){
                                        console.log(this.$parent, this.$parent.name);
                                        this.$parent.btnclick();
                                    }
                                }
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

通过子组件中在定义子组件，然后通过this.$parent拿到父组件对象，但是这种方式耦合度很高，一般不常用

this.$root获取root根组件

components:{
                    component1:{
                        template: '#content',
                        data(){
                            return {name: 'Jack'}
                        },
                        methods:{
                            btnclick(){
                                console.log("打印component1组件中的showMessage函数");
                            }
                        },
                        components:{
                            component2:{
                                template: '#content2',
                                methods:{
                                    cmpclick(){
                                        // console.log(this.$parent, this.$parent.name);
                                        // this.$parent.btnclick();
                                        console.log(this.$root, this.$root.message);
                                        
                                    }
                                }
                            }
                        }
                    }
                }