Dav*_* SK 5 javascript web-component vue.js vuejs3
我正在使用 VueJS 3 创建一个 Web 组件，我想在组件上公开一个方法，允许用户执行如下操作：
<custom-component id="x1" />
<script>
var component = document.getElementById("x1");
component.customMethod(); // as focus() method on native elements
</script>
如果我在组件上定义了一个方法，我就可以在组件内部调用该方法。但当我将其用作 Web 组件时，该方法不可用。
//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 组件包装器指示 customMethod 将在组件外部可用？
在 中<script setup>，使用defineExpose()宏：
<script setup>\nconst customMethod = () => {\xe2\x8b\xaf}\n \ndefineExpose({ customMethod })\n</script>\n在setup()钩子中，使用参数expose的属性context：
<script>\nexport default { \n setup(props, { expose }) {\n const customMethod = () => {\xe2\x8b\xaf}\n \n expose({ customMethod })\n }\n}\n</script>\n在选项 API 中，使用expose选项：
<script>\nexport default {\n \n expose: [\'customMethod\'],\n methods: {\n customMethod() {\xe2\x8b\xaf}\n }\n}\n</script>\n目前（从 Vue 3.2.31 开始），访问自定义元素的公开属性的唯一方法是通过其_instance.exposed属性：
<!-- example/index.html -->\n<body>\n <custom-component id="x1"></custom-component>\n <script>\n const el = document.getElementById(\'x1\')\n \n el._instance.exposed.customMethod()\n </script>\n</body>\n由于_instance是私有财产，因此请谨慎使用此解决方案，因为该财产可能会在将来的版本中被重命名/删除。
| 归档时间： |
|
| 查看次数： |
3438 次 |
| 最近记录： |