When you first use the script setup syntax, the editor will prompt that this is an experimental attribute. If you want to use it, you need a fixed vue version.

At the end of June, the proposal was officially finalized. It will continue to be used in v3.1.3, but there will still be hints of experimental proposals. In V3.2, the hints will be removed and some abandoned API s will be removed.

What is script setup?

It is a new syntax sugar of vue3. It is not a new function module. It just simplifies the writing method that the previous composite API must return, and has better runtime performance.

Easy to write:

<script setup>
...
</script>

 

When using script setup syntax, internal attributes or methods can be used directly without return; The introduction of sub components can be registered automatically and can be used directly without the registration of components. Next, the specific use of script setup syntax and the difference between script setup() function and setup() function are introduced.

1. Properties and methods do not need to be returned and can be used directly

When using setup() to write a composite API, the internally defined attributes and methods must be exposed to the context using return before they can be used externally. Otherwise, an error will be reported. The writing method is:

<template>
 {{todoList}}
</template>
<script>
export default {
 setup(){
  let todoList = [
   {todo:"I want to see the sea",isCheck:false},
   {todo:"I want to be romantic",isCheck:true},
  ]
  return{
   todoList,
  }
 }
}
</script>

 

Using script setup syntax, you do not need return and setup functions, but only need to define them all in script setup.

The above code can be simplified to:

<template>
 {{todoList}}
</template>
<script setup>
 let todoList = [
  {todo:"I want to see the sea",isCheck:false},
  {todo:"I want to be romantic",isCheck:true},
 ]
</script>

 

2. Automatic component registration

In the script setup syntax sugar, the introduced components can be registered automatically without registering through components, and the name of the current component cannot be specified. The file name will be given priority automatically, and the name attribute is omitted.

<template>
 <SetUp></SetUp>
 <set-up></set-up>
</template>
<script setup>
 import SetUp from "./SetUp.vue"
</script>

 

In the composite API written by setup(), the imported components must be registered in the components before they can be used, otherwise they cannot be imported normally.

3. Component data transfer

When a parent component passes a value to a child component, it needs props to receive it. Setup (props, context) receives two parameters. Props receives the transmitted data. The data received by setup() is as follows:

<template>
 {{ a }} {{ b }}
</template>

<script>
import { toRefs } from "vue"
export default {
 setup(props,context){
  const { a,b } = toRefs(props)
  return {
   a,
   b
  }
 }
}
</script>

 

When the script setup syntax sugar receives the data in props, it uses the defineProps method to obtain it. The above code can be modified as follows:

<template>
 {{ a }} {{ b }}
</template>

<script setup>
import { toRefs } from "vue"
const props = defineProps({
  a: String,
  b: String
})
const { a, b } = toRefs( props )
</script>

 

4. Get attrs, slots, and emits

Setup (props, context) receives two parameters, context context environment, which includes three parts: attribute, slot and user-defined event.

Get the following information in setup():

setup(props,context){
 const { attrs, slots, emit } = context
 // attrs Get the property value passed by the component,
 // slots Slots in components
 // emit Custom event subcomponent
}

 

When using script setup syntax,

• The useAttrs method gets the attrs attribute
• The useSlots method gets slots
• The defineEmits method gets the emit custom event

<script setup>
 import { useAttrs, useSlots } from 'vue'
 const slots = useSlots();
 const attrs = useAttrs();

 const emits = defineEmits(['getChild']);
</script>

 

5. External exposure attribute

The components of script setup syntax will not expose any internally declared properties by default. If there are some attributes to be exposed, you can use define expose.

Subcomponent exposure properties:

<template>
 {{msg}}
</template>

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

let msg = ref("Child Components");

// defineExpose No need to import, use directly
defineExpose({
 msg
});
</script>

 

The parent component references the properties exposed by the child component:

<template>
 <Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue'

let child = ref(null);

onMounted(() => {
 console.log(child.value.msg); // Child Components
 console.log(child.value.num); // 123
})
</script>