Vue3 (Vite) directly access parent data from child component

Question

I have a simple landing page using Vue3 Vite (SSG) without Vuex.

I need to pass a screenWidth value being watched in App.vue to a bunch of child components so that they change images depending on the user's screenWidth.

I could use props to pass this value, but it seems a bit cumbersome to write them for 8 child components, and to use composition data export or provide / inject is definitely overkill.

is there not a way to simply access a parent's data via something like instance.parent (didn't work), $parent.message (Vue2 way), etc from a child component?

// Parent:
data() {
  return {
     screenWidth: 123
  }
}

// Child
<div v-if="$parent.screenWidth > 1200">
    img...
</div>

EDIT: Solving this with props for now as no other (working) solution seems to be available in Vite for what used to be easy as pie in Vue2.

EDIT 2: It occurs to me now that using VueUse's built in useWindowSize might have been a good solution here.

Answer 1

Use v-model binding.

Parent component (assuming setup script):

<script setup lang='ts'>
import {ref} from 'vue';
const screenWidth = ref(720);
// use screenWidth as a regulat reactive variable here
</script>

<template>
  <Child v-model="screenWidth" />
</template>

Child component:

<script setup lang="ts">
import {ref, watchEffect} from 'vue';

const props = defineProps<{
  modelValue: number;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
}>();

const value = ref(props.modelValue);
watchEffect(() => value.value = props.modelValue);

function setValue(newValue: number) {
  value.value = key;
  emit('update:modelValue', value.value);
}
</script>

<template>
  // Use `value` and `setValue` here
</template>