Estoy creando un componente web usando VueJS 3, quiero exponer un método en el componente que permita al usuario hacer algo como esto:
<custom-component id="x1" /> <script> var component = document.getElementById("x1"); component.customMethod(); // as focus() method on native elements </script>Si defino un método en el componente, puedo llamar al método dentro del componente. Pero el método no está disponible cuando lo uso como componente 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"); }¿Cómo puedo indicarle a Vue Component Wrapper que customMethod estará disponible fuera del componente?
En <script setup> , use la macro defineExpose() :
<script setup> const customMethod = () => {⋯} 👇 defineExpose({ customMethod }) </script> En el gancho setup() , use la propiedad de expose del argumento de context :
<script> export default { 👇 setup(props, { expose }) { const customMethod = () => {⋯} 👇 expose({ customMethod }) } } </script> En la API de opciones, use la opción de expose :
<script> export default { 👇 expose: ['customMethod'], methods: { customMethod() {⋯} } } </script> Actualmente (a partir de Vue 3.2.31), la única forma de acceder a las propiedades expuestas del elemento personalizado es a través de su propiedad _instance.exposed :
<!-- example/index.html --> <body> <custom-component id="x1"></custom-component> <script> const el = document.getElementById('x1') 👇 el._instance.exposed.customMethod() </script> </body> Dado que _instance es una propiedad privada, use esta solución con precaución, ya que la propiedad podría cambiarse de nombre o eliminarse en una versión futura.
demostración ( <script setup> )