[Vuejs]-Does defineProps in script setup automatically create a local property of the defined prop?

by

5👍

✅

According to this section :

The script is pre-processed and used as the component’s setup() function, which means it will be executed for each instance of the component. Top-level bindings in <script setup> are automatically exposed to the template. For more details

Knowing that props are unwrapped directly inside the template and also the refs are used without .value.

If you want to reference some prop inside the script you should use props.product like in this example :

<script setup>
const props = defineProps(['product'])

const total=computed(()=>props.product.quantity*props.product.unity_price))

</script>

if the prop is only accessed by template you could get rid off const props just call the macro defineProps :

<template>
    {{ product }}
</template>

<script setup>
defineProps(['product'])
</script>
👤Boussadjra Brahim

Leave a comment