Syntax Sugar Introduction
You can use the setup syntax sugar directly by adding the setup attribute to the script tag.
After using setup syntax sugar,There is no need to write a setup function; components only need to be introduced without registration; attributes and methods do not need to be returned, and can be used directly in the template template.。
<template>
<my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import myComponent from '@/component/';
//The registered variables or methods can be used directly in the template without exporting const numb = ref(0);
let func = ()=>{
++;
}
</script>
New API in syntax sugar
- defineProps: The child component receives props from the parent component
- defineEmits: The child component calls a method in the parent component
- defineExpose: The child component exposes the attributes, which can be obtained in the parent component
2.1defineProps
Parent component code
<template>
<my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import myComponent from '@/components/';
const numb = ref(0);
let func = ()=>{
++;
}
</script>
Subcomponent code
<template>
<div>{{numb}}</div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
</script>
2.2defineEmits
Subcomponent code
<template>
<div>{{numb}}</div>
<button @click="onClickButton">Value addition1</button>
</template>
<script lang="ts" setup>
import {defineProps,defineEmits} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
const emit = defineEmits(['addNumb']);
const onClickButton = ()=>{
//emit (custom methods in parent component, parameter one, parameter two,...) emit("addNumb");
}
</script>
Parent component code
<template>
<my-component @addNumb="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import myComponent from '@/components/';
const numb = ref(0);
let func = ()=>{
++;
}
</script>
2.3defineExpose
Subcomponent code
<template>
<div>Values in subcomponents{{numb}}</div>
<button @click="onClickButton">Value addition1</button>
</template>
<script lang="ts" setup>
import {ref,defineExpose} from 'vue';
let numb = ref(0);
function onClickButton(){
++;
}
//Expose properties in subcomponents defineExpose({
numb
})
</script>
Parent component code
<template>
<my-comp ref="myComponent"></my-comp>
<button @click="onClickButton">Get the exposed values in the child component</button>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import myComp from '@/components/';
//Register ref and get component const myComponent = ref();
function onClickButton(){
//Get the exposed value in the component's value property () //0
}
//Note: You can get the value when used during the life cycle or during events. //But use immediately in setup as undefined () //undefined
const init = ()=>{
() //undefined
}
init()
onMounted(()=>{
() //0
})
</script>
Added: Used with regular script
<script setup> can be used with normal <script>. Ordinary <script> may be used in the event of these needs.
- Options that cannot be declared in <script setup>, such as inheritAttrs or custom options enabled via plugin
- Declaration name export
- Run side effects or create objects that only need to be executed once
<script>
// Normal <script>, executed in the module scope (execute only once) runSideEffectOnce()
// Declare additional options export default {
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// Execute in setup() scope (for every instance)</script>Summarize
This is the end of this article about the use of vue3:setup syntax sugar. For more related contents of vue3:setup syntax sugar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!