This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Introduction | |
| A transparent wrapper is essentially just a wrapper around an underlying component, that adds a bit of functionality. | |
| ## Creation | |
| When creating a transparent wrapper around an existing component, remember the following: | |
| 1. v-model to some data. I passed in a prop called modelValue and emitted an event. | |
| 2. I then set ```const modelData = ref(props.modelValue)```and on the component being wrapped set ```v-model="modelData"``` | |
| 3. define an emit with ```const emits = defineEmits(["update:modelValue"])``` | |
| 4. emit on ```@input="emits("update:modelValue", $event.target.value)"``` | |
| 5. remember to set v-bind="$attrs" on the wrapped component. | |
| 6. Special for @update:model-value: If the component you are wrapping also make use of @update:model-value="", you need to wrap the emit in its own function. |