VueJS同级组件：select组件变化时如何触发input组件.select()？

嗨，针对你遇到的这个同级组件通信问题——当Select组件值变化时调用Input组件的.select()方法，因为Vue2里同级组件无法直接通过ref互相访问，我给你两种实用的解决方案：

方法一：使用事件总线（Event Bus） #

这是Vue2中处理非父子组件通信的经典方案，核心是通过一个全局的Vue实例来传递事件：

1. 创建全局事件总线
   在你的项目入口文件（比如main.js）里，给Vue原型挂载一个全局总线实例：

   Vue.prototype.$bus = new Vue()
   

2. 在Select组件中触发事件
   给Select组件添加watch监听值的变化，当值改变时通过总线触发自定义事件：

   export default {
     data() {
       return {
         selectedValue: ''
       }
     },
     watch: {
       selectedValue() {
         // 触发总线事件，通知Input组件执行select操作
         this.$bus.$emit('trigger-input-select')
       }
     }
   }
   

3. 在Input组件中监听事件并执行方法
   在Input组件的生命周期钩子中监听总线事件，同时记得在组件销毁时移除监听（避免内存泄漏）：

   export default {
     mounted() {
       // 监听总线事件，触发input的select方法
       this.$bus.$on('trigger-input-select', () => {
         this.$refs.inputDom.select()
       })
     },
     beforeDestroy() {
       // 组件销毁时移除事件监听
       this.$bus.$off('trigger-input-select')
     }
   }
   

   别忘了给Input组件里的原生input元素添加ref：

   <input ref="inputDom" type="text" />
   

方法二：借助父组件作为中间媒介 #

既然两个组件都是主实例的同级，那它们共享同一个父组件（根实例），可以通过父组件来传递触发信号：

1. Select组件向父组件发送事件
   当Select的值变化时，通过$emit向父组件传递事件：

   export default {
     data() {
       return {
         selectedValue: ''
       }
     },
     watch: {
       selectedValue() {
         this.$emit('need-select-input')
       }
     }
   }
   

   在父组件的模板中给Select绑定这个事件：

   <my-select @need-select-input="handleSelectInput"></my-select>
   

2. 父组件调用Input组件的方法
   给Input组件添加ref，在父组件的方法中调用Input组件暴露的方法：

   <my-input ref="targetInput"></my-input>
   

   父组件的methods：

   export default {
     methods: {
       handleSelectInput() {
         // 通过ref调用Input组件的方法
         this.$refs.targetInput.triggerSelect()
       }
     }
   }
   

3. Input组件暴露触发方法
   在Input组件中定义一个方法，用于调用原生input的.select()：

   export default {
     methods: {
       triggerSelect() {
         this.$refs.inputDom.select()
       }
     }
   }
   

   同样要给原生input元素添加ref：<input ref="inputDom" type="text" />

补充说明 #

你提到的“无法使用ref属性”，其实是指同级组件之间不能直接通过ref互相访问——因为ref是注册在父组件的上下文中的，只有父组件能通过ref访问子组件。上面两种方案都避开了同级直接访问的问题，符合Vue2的组件通信规范。

内容的提问来源于stack exchange，提问作者Andrew Berridge