What is script setup?

It is a new syntax sugar of Vue3 in the setup function. All ES module exports are considered values exposed to the context and included in the setup () return object. Compared with the previous writing method, the syntax becomes simpler after use.

The usage is extremely simple. You only need to add the setup keyword to the script tag. Example:

<script setup></script>

Automatic registration of components

In script setup, imported components can be used directly without having to register through components And cannot specify the name of the current component, it will automatically be based on the file name, that is, you no longer have to write the name attribute. Example:

<template>
    <Child />
</template>

<script setup>
Import Child from'. / Child.vue'
</script>

If you need to define attributes similar to name, you can add a level script tag and implement it inside.

Use of component core API

Use props

Specify the current props type through defineProps to get the props object for the context. Example:

<script setup>
  Import {defineProps} from 'vue'

  Const props = defineProps ({
    Title: String
  })
</script>

Use emits

Use defineEmit to define the events contained in the current component, and execute the emit through the returned context. Example:

<script setup>
  Import {defineEmits} from 'vue'

  Const emit = defineEmits ( ['change', 'delete'])
</script>

Get slots and attrs

You can get slots and attrs from the context through useContext. However, after the proposal was formally passed, this syntax is abolished and split into useAttrs and useSlots. Example:

// Old
<script setup>
  Import {useContext} from 'vue'

  Const {slots, attrs} = useContext ()
</script>


<script setup>
  Import {useAttrs, useSlots} from 'vue'

  Const attrs = useAttrs ()
  Const slots = useSlots ()
</script>

DefineExpose API

In the traditional way of writing, we can access the content of the child component through the ref instance in the parent component. But in script setup, this method cannot be used. Setup is equivalent to a closure. No one can access internal data and methods except internal template templates.

If you need to expose data and methods in setup, you need to use defineExpose API. Example:

<script setup>
Import {defineExpose} from 'vue'
Const a = 1
Const b = 2
DefineExpose ({
A
})
</script>

Use properties and methods directly without returning

This may be one of the great conveniences. In previous writing methods, data and methods must be returned at the end to be used in templates. In script setup, the defined properties and methods do not need to be returned, but can be used directly! Example:

<template>
  <div>
   <p>My name is {{name}}</p>
  </div>
</template>

<script setup>
Import {ref} from 'vue'

Const name = ref ('Sam')
</script>