vue中ref的用法

ref 的用法:

  1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

  2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法

  3、利用 v-for 和 ref 获取一组数组或者dom 节点

注意点:

       1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用

            在生命周期mounted之前的钩子函数中去调用会获取不到,原因是DOM节点都没有生成

            this.refs的组件在v-if为false的父节点下,导致这个子组件未渲染,所以获取不到。组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到

  2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 可以通过下标

posted @ 2020-08-01 15:17  盼星星盼太阳  阅读(5192)  评论(0编辑  收藏  举报