vue中的ref和$refs的使用
ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
ref有三种用法:
1、ref加在普通的元素上,用this.ref.name获取到的是dom元素
2、ref加在子组件上,用this.ref.name获取到的是组件实例,可以使用组件的所有方法。
3、如何利用v-for和ref获取一组数组或者dom节点
普通的DOM元素上使用
varapp7=newVue({ el:"#app7", data:{ }, methods:{ add:function(){ console.log(this.$refs); } } })
子组件上使用
Vue.component('aaa',{ template:"我是一个组件" }) varapp7=newVue({ el:"#app7", data:{ }, methods:{ add:function(){ console.log(this.$refs.inputText); console.log(this.$refs); } } }) varaaa=app7.$refs.inputText; //console.log(aaa); //console.log(aaa.$el.innerText);
$refs:一个对象,持有注册过ref特性的所有DOM元素和组件实例
注意:$refs只会在组件渲染完成之后生效,并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问$refs
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。