Vue 实现输入框的聚焦

目录

方法一、绑定 ref

方法二、使用自定义指令——官网

方法三、通过事件中的事件对象 $event，找到 input

方法四、使用原生

---

本人需求场景 ， 在解决用户通过输入数字来控制输入框的高度时 ， 谷歌浏览器能够正常 v-model 双向绑定 ， 实时更新同步 ， 但是唯独到了 IE 浏览器里 ， 右边修改了高度数据后 ， 输入框的高度并没有发生改变 ， 而是当我去点击过输入框之后才会发生改变 ， 所以脑回路就想到了那既然如此 ， 就让其当用户输入完成后 ， 判断一下是否为 IE 浏览器时 ， 让输入框自动聚焦一下， 不就也能近似的实现了同步处理了么 ， 所以在此就整理一下 怎样操作才能控制让其输入进行聚焦呢 ？

方法一、绑定 ref

从 Vue 的实例属性 $ref 去调 input 的 focus 方法使其实现 聚焦 。

当点击聚焦按钮时，使其上面的 input 框实现 聚焦 。

---

不过这种方法有一定的局限性 ， 因为其 $refs 的使用必须得是父子组件之间才行 ， 要是碰上了兄弟组件之间的操作 ， 就不太合适了 。

---

方法二、使用自定义指令——官网

利用 Vue 的 自定义指令 与 指令 v-focus 进行 监听 实现 。

---

方法三、通过事件中的事件对象 $event，找到 input

---

方法四、使用原生

---

项目所用 ：

A 组件 ：

B 组件 ：

---