Nuxt•8mo ago

passing components up the tree

hi! I have a title bar in my layout, and I want to set this from within each page. Currently i'm using page meta for this, but it only works for static things from what I can tell(?) and i want to be able to have dynamic stuff in the title bar, and maybe a way of showing icons in it. is there a way to do this?

4 Replies

mahiro mahiro mahiro•8mo ago

i think you can defineModels on children then having a ref on parent -> you can change the title by changing on the (defineModels on children). that's how i would do it

titlebar = ref("");

passing like this
v-model:titlebar="titlebar"

in children:
<h1> {{ titlebar }} </h1>
const titlebar = defineModel("titlebar")
titlebar.value = ...

titlebar = ref("");

passing like this
v-model:titlebar="titlebar"

in children:
<h1> {{ titlebar }} </h1>
const titlebar = defineModel("titlebar")
titlebar.value = ...

Alexzvn™•8mo ago

// alternative solution is use inject/provide
// see more at https://vuejs.org/guide/components/provide-inject

/** In layout */
const title = ref('')

provide('setTitle', (value: string) => title.value = value)

/** In any child component wrapped by layout */
const setTitle = inject('setTitle') as (value: string) => void

setTitle('something else')

// alternative solution is use inject/provide
// see more at https://vuejs.org/guide/components/provide-inject

/** In layout */
const title = ref('')

provide('setTitle', (value: string) => title.value = value)

/** In any child component wrapped by layout */
const setTitle = inject('setTitle') as (value: string) => void

setTitle('something else')

Flo•8mo ago

some smart guy once told me to use a store for such things...

rosalina saige, cutest kitty :3OP•8mo ago

oops sorry for not seeing this yesterday, but thanks so much for the suggestions!! didn't know about any of this

Gaming

Programming

passing components up the tree