javascriptvue.jsvue-componentvuejs3slot

best alternative for <slot/> in <textarea> in [ Vue.js 3 ] component

I want create component with textarea and pass data inside that like

<c-textarea> hello world </c-textarea>

but the classic <slot/> tag not work inside of textarea what's simplest and cleanest alternative

<template>
   <textarea><slot/></textarea>
</template>

in Vue.js 3

Solution

  • You can extract the content of a slot:

    <template>
   <textarea>{{ $slots.default ? $slots.default()[0].children : ''}}</textarea>
</template>

    Basically, this builds the slot manually, which gives you a VNode element, where children contains the slot content.

    I would really try to find another way though, this is coarse, error prone and most likely not what you want to do.

    Personally, I would stick to the v-model approach.