See discussion here.
This package serves as a POC that:
- Allows any level of component encapsulation for child components.
- Supports dynamically toggling children with
v-if
and re-ordering withv-for
. - Support TypeScript.
- Whose implementation details are abstracted away from the consumer components.
npm i --save vue-coupled
eg. A <Select>
/ <Option>
couple:
import { createCoupled } from 'vue-coupled'
type Option = {
value: string
label: string
disabled?: boolean
}
export const { useParent, useChild } = createCoupled<Option>()
<script setup lang="ts">
import { useParent } from './option-group'
const children = useParent()
// children will be a shallow ref for the reactive options array, whose
// option data is provided by the `Option` component via `useChild`
</script>
<script setup lang="ts">
import { useChild } from './option-group'
// Vue doesn't support imported type in defineProps transformation yet
type Option = {
value: string
label: string
disabled?: boolean
}
const props = defineProps<Option>()
useChild(props)
</script>