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

从标准JS访问Vue组件可以通过以下几种方式实现：

使用ref属性：在Vue组件中，可以通过给组件添加ref属性来获取对组件实例的引用。在标准JS中，可以通过访问ref属性来获取组件实例，并调用组件的方法或访问组件的属性。例如：

// 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组件可以通过自定义事件与外部进行通信。在标准JS中，可以通过监听组件触发的事件来获取组件的数据或执行相应的操作。例如：

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

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

在标准JS中，可以通过addEventListener方法来监听组件触发的事件，并获取传递的数据。例如：

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

使用全局事件总线：Vue提供了一个全局事件总线，可以用于在组件之间进行通信。在标准JS中，可以通过订阅和发布事件来实现组件间的通信。例如：

// 创建全局事件总线
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>

通过以上方式，可以在标准JS中访问Vue组件并实现组件间的通信。请注意，以上示例中的代码仅为演示目的，实际使用时需要根据具体情况进行适当的调整。