Vue--this.$refs 获取dom元素和组件(获取子组件的dom和方法)
2023-09-11 14:18:36 时间
<!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="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="获取元素" @click="getElement" ref="mybtn"> <h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3> <hr> <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() { // console.log(document.getElementById('myh3').innerText) // ref 是 英文单词 【reference】 值类型 和 引用类型 referenceError // console.log(this.$refs.myh3.innerText) // console.log(this.$refs.mylogin.msg) // this.$refs.mylogin.show() } }, components: { login } }); </script> </body> </html>
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- vue - Vue介绍
- 【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法
- 【Vue】在新电脑部署Vue项目时,遇到的常见错误解决方法
- 【Vue】Vue-cli中组件之间的嵌套
- 【Vue】Vue-cli(脚手架)导入组件路径报错的正确方法
- 【Vue】单文件的组件(.vue)代码实例
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 07Vue - Vue实例(属性与方法)
- [转]浅谈vue中provide和inject 用法
- [转]Vue CLI 3搭建vue+vuex 最全分析
- vue组件传值的方法有哪些
- Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue文档摘录九:Vue Router
- vue 中标题或一段文字数过长,使用用...代替的方法
- Vue子组件调用父组件的方法
- vue中引入awesomeswiper的方法以及编写轮播组件
- vue-webpack项目本地开发环境设置代理解决跨域问题
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Django+Vue项目学习第三篇:使用axios发送get请求,解决跨域问题,调通前后端
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- vue-cli + webpack 多页面实例配置优化方法
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现