I am developing a vue/vuetify app that contains a large Form that includes some third party components that are not connected to vuetify's validation logic. To initialise and hook up the third party component to validation, I came up with the idea to wrap it in a custom component and provide() a that is injected to this custom component and then passed to the child third party component. The 3rd party component also needs to tell the parent component back about changes in the injected value which is achieved by using a ref. (The parent component collects all values and submits them to the server in the process.) To my big surprise, this works like a charm for me. I can reuse the ChildComponent easily since the keys for the injected refs are not hardcoded.
Nevertheless I have a feeling that this could be an antipattern or bad practice. Unfortunately, I can not tell, if this feeling of mine is true. Maybe this could be a clue for a bad overall architecture?
Would there be a more idiomatic way to achieve this? For example I could work with events here or define watchers - but both options would produce way more written code.
I would be very thankful for your opinion.
// ParentComponent
<template>
<v-container>
<v-form>
....
// many many other components that are hooked up to v-form validation
.....
<Child dateSymbol="someDateRef" validitySymbol="someValidityRef">
</v-form>
</Child>
</v-container>
</template>
<script setup lang="ts">
import { provide, ref } from "vue";
import Child from "./Child.vue";
const isValid = ref(true);
const someDate = ref("");
provide("someValidityRef", isValid);
provide("someDateRef", someDate);
</script>
// ChildComponent
<template>
<div>
<ThirdPartyComponent v-model="date" />
</div>
</template>
<script setup lang="js">
import { defineProps, inject, ref } from "vue";
const props = defineProps({
dateSymbol: {
type: String,
required: true
},
validitySymbol: {
type: String,
required: true
},
});
function validate() {
// validation logic
// will flip injected valid: ref
}
const date = ref(props?.dateSymbol);
const valid = inject(props?.validitySymbol) ?? "default";
</script>