Vue ref 与#nextTick的使用

nextTick

在我们Vue中，如果我们需要在DOM渲染完成后执行一些代码，一般就是获取DOM的操作。我们可以使用nextTick

{
  created () {
    this.$nextTick(() => {
      // 可以使用回调函数的写法
      // 这个函数中DOM必定渲染完成
    })

    this.$nextTick().then(() => {
      // 也支持promise
      // 这个函数中DOM必定渲染完成
    })
  }
}

ref

我们可以给组件标签或者普通元素标签上添加ref属性，添加这些属性后我们需要在对应的组件中通过 this.$refs.ref属性值 来获取到对应的内容

• 给普通标签添加，ref对应的是该标签的DOM对象 一定要放在this.$nextTick()
• 给组件标签添加，ref对应的是该组件的实例对象

在elementui里，开发者给很多组件添加了一些方法（Method），我们就可以通过ref获取到对应的组件实例对象，然后调用相关方法