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