I'm quite new to Vue 3 and i'm struggling a lot to understand some concepts of the composition API.
I'm trying to port a library i'm using from vue 2 to vue 3, and in a parent element a reactive property called layout
is passed to children components.
So in the parent component i'm returning layout
to the children like this:
setup(props){
const layout = ref({'width': 10, ... })
return {
layout,
...
}
}
The problem is that, in order to access width
or any other reactive value in layout
from any children component i need to use the syntax layout.value.width
. This is quite a problem because through the whole project layout
is referenced with layout.width
, this means that i need to add a .value
to every reference to layout
and do the same for all the other reactive variables i'm passing to my children components. Is there any way to avoid this or am i just not getting some important concepts from the composition api?
CodePudding user response:
There are at least two ways:
- Yes. You can work without the
.value
. You have to use the vue experimental version
or
- You can create a
reactive
variable, like:
<script setup>
import { reactive } from 'vue'
const layout = reactive({'width': 10, ... })
</script>