This article lists some common ways of writing script-setup. For more information, go to the official vue-script-setup.
Components of the name
Script-setup cannot specify the name of the current component, so use a filename instead.
Component components
Importing any component in script-setup can be used directly in template
<script setup>
import Foo from './Foo.vue'
import MyComponent from './MyComponent.vue'
</script>
<template>
<Foo />
<! -- kebab-case also works -->
<my-component />
</template>
Copy the code
Dynamic component usage
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
</template>
Copy the code
Exposes the component’s public interface, which the parent calls through ref
<script setup>
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
Copy the code
Directive directive
Import directives are used the same way as import components
<script setup>
import { directive as vClickOutside } from 'v-click-outside'
</script>
<template>
<div v-click-outside />
</template>
Copy the code
props
While specifying the current props type via defineProps, the props object that gets the context needs a reference to props[key] in script, whereas the key can be called directly in template
<script setup>
import { defineProps } from 'vue'
// expects props options
const props = defineProps({
foo: String,
})
</script>
Copy the code
Props to the default value
interface Props { msg? : string } const props = withDefaults(defineProps<Props>(), { msg: 'hello' })Copy the code
emit
The trigger event that the current component contains is specified by defineEmits and the event is emitted through the context emit returned by defineEmits
<script setup>
import { defineEmits } from 'vue'
// expects emits options
const emit = defineEmits(['update'.'delete'])
</script>
Copy the code
Slots and attrs
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
Copy the code
Top-level await asynchrony
Script setup can use await async directly, and setup() of the compiled product will automatically add async.
<script setup>
const post = await fetch(`/api/post/1`).then((r) = > r.json())
</script>
Copy the code
import { withAsyncContext } from 'vue'
export default {
async setup() {
let __temp, __restore
const post =
(([__temp, __restore] = withAsyncContext(() = >
fetch(`/api/post/1`).then((r) = > r.json())
)),
(__temp = await __temp),
__restore(),
__temp)
// current instance context preserved
// e.g. onMounted() will still work.
return { post }
}
}
Copy the code
Customize the Template binding object
<script setup="props">
export const foo = 1
export default {
props: ['bar']
}
</script>
<template>
<div>{{ foo + bar }}</div>
</template>
Copy the code
Note:
follows the rules of the setup function, which is called only once when the component is loaded