vue 之 ref
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 | <!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>Document</title> <script src= "js/vue.js" ></script> </head> <body> <div id= "app" > <!-- 引用DOM元素 --> <input type= "text" value= '获取元素' @click= "getElement" ref= "mybtn" > <h3 id= "myh3" ref= "myh3" > 哈哈哈!!!!</h3> <!-- 引用组件 --> <login ref= "mylogin" ></login> </div> <script> var login = { template: '<h1>登陆组件</h1>' , data() { return { msg: 'son msg' } }, methods: { show() { console.log( '调用了子组件的方法' ); } } } //创建Vue实例,得到 ViewModel var vm = new Vue({ el: '#app' , data: {}, methods: { getElement() { //vue不建议操作DOM // console.log(document.getElementById('myh3').innerText); //哈哈哈!!!! //ref -->reference 引用 console.log( this .$refs.myh3.innerText); //哈哈哈!!!! console.log( this .$refs.mylogin.msg); //'son msg'this.$refs.mylogin.show(); //调用了子组件的方法 } }, components: { login } }); </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 本地部署 DeepSeek:小白也能轻松搞定!
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)