When you first start using the Script Setup syntax sugar, the editor will prompt you that this is an experimental property and that you need to fix the Vue version to use it.

At the end of June, the proposal was finalized. In v3.1.3, the suggestion for the experimental proposal will continue to be used, and in V3.2, the hint will be removed and some of the deprecated apis will be removed.

What is Script Setup?

Is a new syntax candy for VUe3. It is not a new feature module, but simply simplifies the way that the combinative API must return, and has better runtime performance.

Easy to write:

<script setup>
...
</script>
Copy the code

When using script Setup syntax sugar, internal properties or methods can be used directly without a return. We introduce the use of script Setup syntax sugars and how they differ from the setup() function.

1, properties and methods do not need to return, can be used directly

When setup() is used to write composite apis, internally defined properties and methods must be exposed to the context using a return, otherwise an error will be reported:

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

With script Setup syntax sugar, you don’t need returns and setup functions, just define them all inside Script Setup.

The above code can be simplified as:

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

2. Automatic component registration

In the Script Setup syntax sugar, imported components can be automatically registered without the need to register through components, and the name of the current component cannot be specified. Instead, the name attribute is omitted.

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

In the composite API written by Setup (), imported components must be registered in components before they can be used, otherwise they won’t be imported properly.

3. Component data transfer

When a parent component passes a value to a child component, props needs to receive it. Setup (props, context) receives two parameters, and props receives the data passed. Setup () receives the data 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>
Copy the code

When the script Setup syntax sugar receives data from props, use the defineProps method to get this code:

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

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

Get attrs, slots, and emits

Setup (props, context) accepts two parameters, context context, which contains properties, slots, and custom events.

Setup () gets the following:

Setup (props,context){const {attrs, slots, emit} = context attrs, // slots // emit custom event sub-component}Copy the code

When using the Script Setup syntax sugar,

  • 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>
Copy the code

5, external exposure attributes

Components of the Script Setup syntax sugar do not expose any internally declared properties by default. Use defineExpose if you want to expose some properties.

Child component exposure properties:

<template> {{msg}} </template> <script setup> import { ref } from 'vue' let msg = ref("Child Components"); DefineExpose ({MSG}); </script>Copy the code

The parent component references attributes 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>
Copy the code