Vue 3自定义元素无法通过原生JavaScript调用组件方法

嘿，这个问题我之前踩过坑！Vue 3 把组件打包成自定义元素的时候，默认不会把组件内部的方法直接暴露给原生 DOM 实例，得我们手动配置一下才行～

问题根源 #

Vue 3 的自定义元素在默认情况下，组件内部的 methods 并不会挂载到 DOM 元素实例上，主要是为了封装性考虑。所以你直接调用 el.open() 会提示方法不存在，得先把需要外部调用的方法显式暴露出来。

解决步骤 #

1. 在 Vue 组件中显式暴露方法

根据你用的是选项式 API 还是组合式 API，分别做如下修改：

如果是选项式 API：
在组件里添加 expose 选项，指定要暴露给外部的方法名：

export default {
  methods: {
    open() {
      console.log('Open Called')
    }
  },
  // 关键：指定要暴露的方法
  expose: ['open']
}

如果是组合式 API（