vue中ref的使用（this.$refs获取为空）

 

//6.14更新

 但是有个办法，我们可以使用 

this.$nextTick(() => {
    // todo
})

setTimeout(() => {
    // todo
}, 0)

来得到数据

 

ref

本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的

$refs不是响应式的，只在组件渲染完成后才填充

用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

 

如果你获取到的总是空的，你注意一下：

1、你在哪里调用，和你调用的对象

试试在mounted（）里面调用有效果没有

调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看

2、调用对象是不是数组列表

    我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，

    后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，

    只能遍历这个this.$refs.name数组，在this.$refs.name[index]上设置样式

// 6.14 更新，这个说法有点问题

但是像高度宽度，可以通过offsetHeight，等来获取。

3、调用对象是否和v-if结合使用

  ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

 

最后

在使用中，我发现$refs.style只能设置该对象的样式，获取出来的值都是空的