<vue 组件 3、父子组件相互访问>

代码结构

 

 

一、     01-组件访问-父访问子

1、 效果  

点击后在父组件里展示子组件的参数

 

 

2、代码

01-组件访问-父访问子.html

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
 
        <div id="app">
            <cpn ref="zi"></cpn>
            <div>--------------------</div>
            <div>我是父组件 </div>
            <button @click="btnClick">按钮</button>
            <div>
                {{ziName}}
            </div>
        </div>
 
        <template id="cpn">
            <div> 子组件name: {{name}} </div>
              
        </template>
         
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: '你好',
                    ziName:'父组件名称的初始值'
                },
                methods: {
                    btnClick() {
                        //$refs => 对象类型
                        this.ziName = this.$refs.zi.name;
                    }
                },
                components: {
                    cpn: {
                        template: '#cpn',
                        data() {
                            return {
                                name: '我是子组件的name',
                            }
                        }
                    }
                }
            })
        </script>
 
    </body>
</html>

 

 

二、     02-组件访问-子访问父

1、 效果

点击后在子组件中访问了父组件和根组件的参数

 

 

2、代码

02-组件访问-子访问父.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
 
        <div id="app">
            <h2>我是根组件</h2>
             <h2>---------</h2>
            <cpn></cpn>
        </div>
 
        <template id="cpn">
            <div>
                <h2>我是父组件</h2>
                <h2>---------</h2>
                <ccpn></ccpn>
                 
            </div>
        </template>
 
        <template id="ccpn">
            <div>
                <h2>我是子组件</h2>
                <button @click="btnClick">按钮</button>
            </div>
        </template>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: '我是根组件！'
                },
                components: {
                    cpn: {
                        template: '#cpn',
                        data() {
                            return {
                                name: '我是父组件的name'
                            }
                        },
                        components: {
                            ccpn: {
                                template: '#ccpn',
                                methods: {
                                    btnClick() {
                                        // 1.访问父组件$parent
                                        // console.log(this.$parent);
                                          console.log(this.$parent.name);
 
                                        // 2.访问根组件$root
                                        //console.log(this.$root);
                                        console.log(this.$root.message);
                                    }
                                }
                            }
                        }
                    }
                }
            })
        </script>
 
    </body>
</html>

 

posted @   万笑佛  阅读(87)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示