<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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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 让容器管理更轻松!