Vue中input自动聚焦

举例：鼠标点击span标签时，span标签消失，同时input显示，并且，input在此已经获取到了焦点

分析：当需要浏览器重绘重排的时候，是需要时间的，当点击span标签时Input还没有渲染出来，此时如果在点击span的方法里直接写focus()，可以发现是不起作用的，input没有何来焦点？

于是this.$nextTick派上用场

$nextTick：是指等下一次dom更新，循环结束之后执行延迟回调，在修改数据之后，立即执行回调函数，此链接有例子解释

https://blog.csdn.net/guhanfengdu/article/details/125984329?spm=1001.2014.3001.5502

  // 点击span变为编辑模式
    toEdit(row,index){
      row.flag=true
      // 获取input节点实现自动聚焦
     this.$nextTick(()=>{
       this.$refs[index].focus()
     })
    }

上图用到了作用域插槽，row代表的是要点击那一行的数据，index为第几行，用于——当v-for同时生成多个input时，区分点击的是哪个，获取焦点的就是哪个，可作为例子背景了解即可。$refs为标识，相当于给上方v-for遍历的input标识，相当于id选择器，用于获取节点。

由于index为变量，所以不能使用$ref.index，而需要使用中括号。