How to passing props from the parent's <slice-zone> down to be used in indidivual slices

Slice Machine
#1

When working with vue component I pretty much can do this:

parent:
<hero-solution :doc="doc" parent="/sector/retail" suite="RX" theme="#5654A7" />

child:
<h3 :style="{color: $attrs.theme}" class="pt-8">Example</h3>

But this does not work when I attempt to pass similar via ..

<slice-zone type="retail" :uid="$route.params.uid" :doc="doc" theme="#5654A7" />

The 'theme' prop just never becomes available, which I use the vue inspection tool, I can see the value against the SliceZone but it's not shown for any of the children.

Please give a fully realised example of how to pass dynamic values from the parent down to the child slices using <slice-zone>.

Thanks

#7

Hello @online,

Thanks for reaching out to us.

Currently, you can only pass prop theme to slices which are already defined in 'vue-slicezone'. If you want to pass your props to your custom slices, you need to create your own library for that.

Please check this example project create by my colleague, you can explore this but, you can not import these slice.

Let me know if you have any other question.

Thanks,
Priyanka

#8

Ok I'm pretty confused.

So I just want to pass a prop down via are you saying this is difficult to achieve?

Also I'm working in nuxt/vue so the example is not so easy to follow as Im less familiar with react. Do you have a nuxt example?

Simply I want to define a variable on the parent.. doesn't need to be called theme.. and then pass that down to be available to the slice children.

Can you please provide me with sample code of how I can do this (hopefully fairly easily). Seems like a pretty common use case.

Thanks

#9

I assumed you are using Slice-Machine, and my response was aligned with that. Can you please confirm that are you using slice-machine?

#10

Wait. I think this is a huge concern if I'm interpreting it correctly.

So you folks are saying there is currently no simple way to pass our own custom props down from a page to the underlying slices??

This is core functionality within say nuxt components.
It means that slices become an inaccessible island.

To work around this I'm not going to have to add additional fields in the Prismic Writers Room to make up for this gap. Eg get the user to awkwardly "set variables" which should be fed into the slice as "paramaters".

I would have expected that passing down custom props via a predefined prop like "params" would be the sort of thing I'd need to do to make this work.

This is like programming without being able to set input paramaters.

Please review with the dev team. This is needs addressing as a fairly critical issue.

#12

Right, we'll provide a fix with custom parameters by the end of the week. Thanks for your input

2 Likes
#13

@online, I created a PR here: https://github.com/prismicio/slice-machine/pull/67 and published an alpha version of the package. Can you try vue-slicezone@0.0.28-alpha.1?

#14

This issue has been closed due to inactivity. Flag to reopen.