Passing data to components using custom directives in Vue3: A guide

Question

I want to achieve this behavior

<simple-component v-layer="'pizza'" />

Using a custom directive, passed 'pizza' to the component and was able to use it in my SimpleComponent.

The idea is to then put it in the upper parent scope (via v-slot), it's old school and probably not the best way to do it, but the syntax is important to my clients (chars entered here The less the better).

I found this github issue for Vue2 but I'm not sure how to make it work for Vue3 or even the syntax (I know it's not vNode.context but binding.instance now , and we don't need $set since Vue3 uses proxies).

The documentation didn't really help me, and inspecting the examples in regular development tools didn't give me any clues.

PS: We can do almost anything within SimpleComponent itself, we just don't need to see it from outside the component.

Answer 1

Disclaimer

This is pretty hacky, and probably not the right way to do it, since it goes against the Vue API (which clearly indicates that it is readonly), so yes: you Probably don't want to use it that way.

Additionally, directives are used for DOM element modification, rather than reaching and changing Vue state elsewhere. My team's needs are very difficult.
Don't replicate it at home, instead use regular props.

---

Meanwhile, if you do, here's what you need to do.

page.vue

sssccc

SimpleDiv.vue

sssccc