Vue JS : use <script setup> ?
In vue demo3, why you are not using ? Can you provide some examples ?
Best regards, Wilhem
Replies (1)
Hi,
The script setup
syntax has some advantages over with setup(), we will be slowly migrating to this syntax in our subsequent releases.
Since script setup
is compile-time syntactic sugar, it works the same as a setup()
function, you don't need to include return object to use your variables inside the component template.
Usage examples:
<script setup>
// variable
const msg = 'Hello!'// functions
function log() {
console.log(msg)
}
</script>
<template>
<button @click="log">{{ msg }}</button>
</template>
Using Components:
<script setup>
import MyComponent from './MyComponent.vue'
</script><template>
<MyComponent />
</template>
defineProps() & defineEmits()
<script setup>
const props = defineProps({
foo: String
})const emit = defineEmits(['change', 'delete'])
// setup code
</script>
For more information and examples check Vue official doc: https://vuejs.org/api/sfc-script-setup.html
Regards,
Lauris Stepanovs,
Keenthemes Support Team