使用 Vue3 公开创建 Web 组件的方法

Question

我正在使用 VueJS 3 创建一个网络组件，我想在组件上公开一个方法，允许用户执行如下操作：

  <custom-component id="x1" />

  <script>
    var component = document.getElementById("x1");
    
    component.customMethod(); // as focus() method on native elements
  </script>

如果我在组件上定义了一个方法，我就可以在组件内部调用这个方法。但是当我把它作为一个web-component使用时，这个方法是不可用的。

  //main.ts/js
  import { defineCustomElement } from "vue"
  import component from "./component.ce.vue"

  const element = defineCustomElement(component );

  customElements.define("custom-component ", element);

  //component.ce.vue
  const customMethod = () => { console.log("Executed"); }

我如何向 Vue Component Wrapper 表明 customMethod 将在组件外部可用？

Answer 1

在<script setup>中，使用defineExpose() macro:

<script setup>
const customMethod = () => {⋯}
      
defineExpose({ customMethod })
</script>

在 setup() 挂钩中，使用 expose property of the context argument:

<script>
export default {   
  setup(props, { expose }) {
    const customMethod = () => {⋯}
      
    expose({ customMethod })
  }
}
</script>

在选项 API 中，使用 expose option:

<script>
export default {
     
  expose: ['customMethod'],
  methods: {
    customMethod() {⋯}
  }
}
</script>

目前（从 Vue 3.2.31 开始），访问自定义元素公开属性的唯一方法是通过其 _instance.exposed 属性:

<!-- example/index.html -->
<body>
  <custom-component id="x1"></custom-component>
  <script>
    const el = document.getElementById('x1')
                   
    el._instance.exposed.customMethod()
  </script>
</body>

由于 _instance 是私有的属性，请谨慎使用此解决方案，因为属性在未来的版本中可能会 renamed/removed。

demo (<script setup>)

demo (setup() hook)

demo (Options API)

使用 Vue3 公开创建 Web 组件的方法

Expose method creating a web-component using Vue3

javascript

web-component

vue.js

vuejs3