vue想通过点击事件拿到不相关的兄弟组件的dom

在Vue.js中，直接通过点击事件获取其他兄弟组件的DOM元素通常是不可能的，因为单向数据绑定和组件之间的信息传递是通过props、events（$emit和$on）以及自定义的Vuex store来进行的，而不是通过DOM操作。

如果你需要在两个组件之间共享DOM操作，一种常见的做法是：

1. **父子组件通信**：如果两个组件有层级关系，你可以通过`v-on`监听子组件的事件，然后在父组件里处理这个事件并操作DOM。

<!-- 子组件 -->
<template>
  <button @click="$emit('parent-event', domElement)">点击</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('parent-event', this.domElement);
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div ref="parentDom">...{{ childDom }}</div>
  <child-component :onParentEvent="handleParentEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleParentEvent(dom) {
      this.childDom = dom;
      // 这里的dom可以是你想要的操作
    }
  }
};
</script>

2. **利用事件总线（Event Bus）**：在没有直接父子关系的情况下，可以创建一个全局事件总线（如Vuex Store 或者自定义的js模块），让兄弟组件通过这个公共媒介通信。

// eventBus.js
const EventBus = new Vue();

export default EventBus;

// 使用
 EventBus.$on('domElementUpdated', (dom) => {
   // 处理dom更新
 });

// 触发事件
this.$emit('domElementUpdated', someDomElement);