Vue.js 深入源码分析(十) ref属性详解

 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,例如:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://www.likecs.com/vue.js"></script> </head> <body> <div> <h1 ref="info">11</h1> <child ref="child"></child> <p v-for="item in items" ref="item">{{item}}</p> <button @click='show'>Test</button> </div> <script> Vue.component('child',{template:'<h1>I am childComponent</h1>'}) debugger var app = new Vue({ el:'#app', data:{items:[11,12,13]}, methods:{show:function(){console.log(this.$refs)}} //点击后输出Vue实例的$refs属性 }) </script> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdwzz.html