如何从标准JS访问Vue组件？

// Vue组件
<template>
  <div ref="myComponent">Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    // 在组件挂载后，通过this.$refs访问组件实例
    const component = this.$refs.myComponent;
    console.log(component.textContent); // 输出：Hello Vue!
  }
}
</script>

// Vue组件
<template>
  <div>
    <button @click="emitData">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitData() {
      // 在组件中触发自定义事件，并传递数据
      this.$emit('my-event', 'Hello from Vue!');
    }
  }
}
</script>

const component = document.querySelector('vue-component');
component.addEventListener('my-event', (event) => {
  console.log(event.detail); // 输出：Hello from Vue!
});

// 创建全局事件总线
const eventBus = new Vue();

// Vue组件1
<template>
  <div>
    <button @click="emitData">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitData() {
      // 在组件中通过全局事件总线发布事件，并传递数据
      eventBus.$emit('my-event', 'Hello from Vue!');
    }
  }
}
</script>

// Vue组件2
<script>
export default {
  mounted() {
    // 在组件挂载后，通过全局事件总线订阅事件
    eventBus.$on('my-event', (data) => {
      console.log(data); // 输出：Hello from Vue!
    });
  }
}
</script>