VUE中$refs和$el的使用
ref: 给元素或者子组件注册引用信息ref有三种用法:1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素。<div ref="system">测试</div>// 获取mounted() {console.log(this.$refs.system);}2.ref加在子组件上,用this.$ref.xxx可以获取到组件实例,可以使用子组件的所有
ref: 给元素或者子组件注册引用信息
ref有三种用法:
1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素。
<div ref="system">测试</div>
// 获取
mounted() {
console.log(this.$refs.system);
}
2.ref加在子组件上,用this.$ref.xxx可以获取到组件实例,可以使用子组件的所有方法。
使用:
// this.$ref.xxx.方法名()
// 父组件
<contact-info ref="contactInfo"/>
import ContactInfo from './ContactInfo'
components: { ContactInfo },
mounted() {
this.$refs.contactInfo.initVal(data) // 调用子组件方法
}
// 子组件
methods: {
initVal(data){
Object.keys(this.contactInfo).forEach(val=>{
this.contactInfo[val] = data[val]
})
}
}
3.利用v-for和ref组合获取一组dom节点
在通过v-for 遍历获取一组ref时记得加:,即:ref=“xxx”
当v-for用于元素或者组件的时候,引用信息将是包含dom节点或者组件实例的数组。
**加冒号说明后面是一个变量或者是表达式,不加冒号后面就是字符串常量。
ref使用过程中需要注意的点:
1.获取ref要确保在dom已经渲染完成,比如可以在vue生命周期的mounted() {}钩子函数中调用,或者可以在this.$nextTick(() => {})中调用。
2.在页面初始渲染的时候是不能访问ref的,因为此时ref还不存在, $ref也不是响应式的,不能在模板中做数据绑定。
3.在vue中用ref来获取dom的时候,可能会出现this. $refs.xxx 为undefined的情况
(1)场景一:在created()中使用
在这个生命周期中进行数据观测、属性和方法的运算,watch事件回调,但是此时dom还没有渲染完成,是不能通过ref调用dom的。
解决在mounted中调用或者使用nextTick。
(2)场景二:父元素或者当前元素使用了v-if或者v-show
因为 $ref不是响应式的,只在组件渲染完之后才会生效,在初始渲染的时候是不存在的
因为是非响应式的,所有动态加载的模板更新它都无法相应的变化
解决:通过setTimeout(() => {…}, 0)来实现
$el: 获取Vue组件实例挂载的DOM元素
$el读取的是组件实例挂载的dom元素
// 子组件
<template>
<div>
测试
</div>
</template>
<script>
export default {
name: 'TestComs'
};
</script>
// 父组件
<test ref="testCom" />
<div ref="test">11</div>
mounted() {
console.log(this.$refs.testCom, '组件ref'); // 获取组件实例
console.log(this.$refs.testCom.$el, '组件el'); // 获取组件实例的dom元素
console.log(this.$refs.test, '元素ref'); // 获取dom元素
console.log(this.$refs.test.$el, '元素el'); // $el用于vue组件,普通dom元素不能用
},
结果如下图:
更多推荐
所有评论(0)