Vue父子组件访问

最新推荐文章于 2022-04-22 09:58:51 发布

-Ali

最新推荐文章于 2022-04-22 09:58:51 发布

阅读量222

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47492981/article/details/107225280

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、父组件访问子组件：使用`$children`或`$refs`（在开发中一般使用`$refs`）

（1）使用$children访问：this.$children是一个数组类型，它包含所有子组件对象。（注意：当要拿到所有子组件的时候才会使用$children）

案例：使用$children通过遍历访问子组件中的方法和属性

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="vue.js" type="text/javascript"></script>
</head>
<body>
        <!--父组件模板-->
        <div id="app">
            <cpn></cpn>
            <cpn></cpn>
            <button @click="btnClick">按钮</button>
        </div>
    
        <!--子组件模板-->
        <template id="cpn">
            <div>我是子组件</div>
        </template>
    
        <script>
            const cpnC = {
                template:'#cpn',
                data() { 
                    return {
                      name:"张三"
                    }
                },
                methods:{
                    showMessage() {
                        console.log("showMessage");  
                    }
                }
            }
    
            const app = new Vue({
                el:"#app",
                data:{
                },
                components:{
                    cpn:cpnC
                },
                methods:{
                   btnClick() {
                       //访问子组件：$children
                       console.log(this.$children);
                       for (let c of this.$children) {
                           console.log(c.name);//拿到子组件中的属性name
                           c.showMessage();//调用showMessage()拿到子组件中的方法 
                       }
                   }   
                }
            })
        </script>
</body>

（2）使用$refs访问：$refs是一个对象类型，默认是一个空的对象，必须在组件上添加ref="xxx"

案例：使用$refs访问第二个组件中的属性name

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
    <!--父组件模板-->
    <div id="app">
        <cpn></cpn>
        <cpn ref="aa"></cpn> <!--添加ref="aa"-->
        <button @click="btnClick">按钮</button>
    </div>

    <!--子组件模板-->
    <template id="cpn">
        <div>我是子组件</div>
    </template>

    <script>
        const cpnC = {
            template:'#cpn',
            data() { 
                return {
                  name:"张三"
                }
            },
            methods:{
                showMessage() {
                    console.log("showMessage");  
                }
            }
        }

        const app = new Vue({
            el:"#app",
            data:{
            },
            components:{
                cpn:cpnC
            },
            methods:{
               btnClick() {
                   //访问子组件：$refs
                   console.log(this.$refs.aa.name);//取出第二个子组件中的属性name
               }   
            }
        })
    </script>        
</body>

2、子组件访问父组件：使用`$parent`或`$root`（在开发中一般使用`$root`）

（1）使用$parent访问

案例：使用$parent访问父组件中的属性name

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <cpn></cpn>
    </div>

    <template id="ccpn">  <!--子组件-->
        <div>
            <h2>我是ccpn组件</h2>
            <button @click="btnClick">按钮</button>
        </div>
    </template>

    <template id="cpn"> <!--父组件-->
        <div>
            <h2>我是cpn组件</h2>
            <ccpn></ccpn>
        </div>
    </template>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
            },
            components:{
                cpn:{ //cpn组件是根组件的子组件
                    template:'#cpn',
                    data() {
                        return {
                            name:"李四"
                        }
                    },
                    components:{
                        ccpn:{ //ccpn组件是cpn的子组件
                            template:"#ccpn",
                            methods:{
                                btnClick() {
                                    //访问父组件：$parent
                                    console.log(this.$parent);
                                    console.log(this.$parent.name);//取出父组件中的name属性                
                                }
                            }
                        }
                    }
                }
            }    
        })
    </script>        
</body>

（2）使用$root访问

案例：使用$root访问根组件中属性name

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <cpn></cpn>
    </div>

    <template id="ccpn">  <!--子组件-->
        <div>
            <h2>我是ccpn组件</h2>
            <button @click="btnClick">按钮</button>
        </div>
    </template>

    <template id="cpn">  <!--父组件-->
        <div>
            <h2>我是cpn组件</h2>
            <ccpn></ccpn>
        </div>
    </template>

    <script>
        <!--根组件-->
        const app = new Vue({
            el:"#app",
            data:{
                name:"王五"
            },
            components:{
                cpn:{ //cpn组件是根组件的子组件
                    template:'#cpn',
                    components:{
                        ccpn:{ //ccpn组件是cpn的子组件
                            template:"#ccpn",
                            methods:{
                                btnClick() {
                                    //访问根组件：$root
                                    console.log(this.$root);//访问根组件中的Vue实例
                                    console.log(this.$root.name); //访问根组件中的属性name             
                                }
                            }
                        }
                    }
                }
            }    
        })
    </script>        
</body>

-Ali

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父子组件访问

1、父组件访问子组件：使用$children或$refs（在开发中一般使用$refs）（1）使用$children访问：this.$children是一个数组类型，它包含所有子组件对象。（注意：当要拿到所有子组件的时候才会使用$children）案例：使用$children通过遍历访问子组件中的方法和属性<head> <meta charset="UTF-8"> <title>Document</title>
复制链接

扫一扫