He creado el componente básico de Vue que es el siguiente.
<template> <div class="example"> /* here render the component or HTML passed by pluing */ </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ name: 'Example', }); </script> Ahora necesito crear un complemento que represente cualquier HTML o Componente pasado al Example . Conozco la sintaxis básica de los complementos y cómo usarlos en Vue, pero no sé cómo hacer esta tarea ya que soy un novato en Vue
export default { install(vue, opts){ /* how to take the component or HTML and pass to `Example` Component */ } }Necesito implementar estos en vue2.
Puede usar una slot para representar un HTML arbitrario dentro de cualquiera de sus componentes.
Su componente de ejemplo:
<template> <div class="example"> <slot /> </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ name: 'Example', }); </script>Entonces úsalo así:
<template> <example> <div>Render me inside the slot</div> </example> </template>Y dará como resultado el siguiente HTML renderizado:
<div class="example"> <div>Render me inside the slot</div> </div>Luego, en su complemento, puede usar su componente Ejemplo y pasarle cualquier html que desee.
Actualización: así se vería su complemento. Simplemente cree un componente global dentro de él.
import Vue from 'vue' const ExamplePlugin = { install(Vue){ Vue.component('Example', { name: 'Example', template: '<div class="example"><slot /></div>' }) } } Luego puede Vue.use(ExamplePlugin) y el componente Example estará disponible globalmente en su aplicación