Composition API, get v-model of input in slot

[alebus84]

Hello,

Sorry for my bad English. I have a "Formx" component, which has a default "slot". And an "InputTextx" component, which is an "input". I pass "InputTextx" in the "slot" of "Formx". I would like to get in "Formx" the "v-model" of "InputTextx".

"Formx" :

<template>
  <form>
    <slot></slot>
  </form>
</template>

"InputTextx" :

<template>
  <div class="field">
    <input type="text" :placeholder="label" :id :name v-model="model" />
    <label :for="id">{{ label }} :</label>
  </div>
</template>

And use :

<section>
    <Cardx>
      <template #title>
        <Formx>
          <InputTextx name="toto"></InputTextx>
        </Formx>
      </template>
    </Cardx>
  </section>

Thank you in advance.

[Wei-Ba]

use privode/inject

[gitboyzcf]

You can use props to pass values and combine watchPostEffect in the form component to listen for ref, which can be obtained

demo https://play.vuejs.org/#eNqVU8Fu2zAM/RVBl7pAZmPrToFTYBsyoAO2Bt2OumQ27SqTJUGi0wBB/n2UZCdG2gbtTeR7Ih+ppz3/Ym2+7YHPeekrJy0yD9jbW6FlZ41DtmcOGnZgjTMduyLq1RH6blz3jbIJyouG4lDsxLjTtscpRQ6JgSZ0ZbQ/8R6o1SI0zK6FLoukiLRQgNBZtUagiLFybD2vTLcQfHJf8MggzrE51XvGKYsxTgWLoSJFZTHpxWccPYlsZJtvvNG0qH24IDh1tlKBu7coaQjB5ywiAVsrZZ5+xBy6HmZjvnqE6t8L+Y3fhZzgKwce3BYEP2K4di1ggpe/f8GOzkewM3WviH0BfABvVB80JtrXXtcke8KLau/ii0nd/vHLHYL241BBaGAeIl9wejna06ujn+Te5J/jPaEPtMXRHJec9rTG6nFlPC6bBiqcGf3T9BqhPvNfMo11xnqySw2N1LAKURZl0MvM7/9uqAK1JiMJfVY4y4hyzRa3SbZsslgrD9lhkNDCKMiVaU9g3vmW6qWZYuHLLq3ldjSjVwZZMXgt5c99Nv0b7/mPbFwIqRt+z8dPN1FeWs1yZ42HbE94UP1GxVEO234gF4Gi/0O3Bb84wuE/mcN4Pg==

The watchPostEffect document doesn't seem to have much introduction. This is about listening after DOM updates https://vuejs.org/api/reactivity-core.html#watchposteffect