vue --- > 获取子组件数据的一个应急方案$refs
2019-07-01 20:22
309 查看
使用$refs需要注意以下2点:
1.html方法使用子组件时,需使用ref = “xxx” 声明.
2.在父组件中使用,this.refs.xxx.msg 获取数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <p>{{ message }}</p> <my-component ref="comA"></my-component> <button @click="handleRef">ref获取子组件数据</button> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('my-component',{ template:'<button @click="sendMessage">派发事件</button>', data:function(){ return { msg:'来自子组件' } } }) const app = new Vue({ el:'#app', data:{ message: '' }, methods:{ handleRef:function(){ this.message = this.$refs.comA.msg } } }) </script> </body> </html>
参考《Vue.js实战》P82
相关文章推荐
- vue 父组件向子组件传值,子组件动态获取数据更新
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
- vue父组件中获取子组件中的数据(实例讲解)
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- VUE——父组件获取子组件的数据
- vue基本使用--refs获取组件或元素
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- Vue父子组件通信之父组件主动获取子组件的数据和方法(二)
- vue2.0 获取从http接口中获取数据,组件开发,路由配置
- Vue组件内部实现一个双向数据绑定的实例代码
- vue---父调子 $refs (把父组件的数据传给子组件)子调父 $emit (把子组件的数据传给父组件)
- vue-父组件获取子组件数据
- vue进入同一个页面不重新获取数据
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值
- vue父组件异步获取数据传给子组件的方法
- Vue父子组件通信之子组件主动获取父组件的数据和方法(三)
- 如想给一个easyui的combobox组件在获取json数据之前添加数据
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- vue组件数据传递、父子组件数据获取,slot,router路由功能示例