How to use vue3 setup syntax sugar

1. Introduction to setup syntax sugar

You can use setup syntax sugar directly by adding the setup attribute in 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; properties and methods do not need to be returned and can be used directly in the template.

2. New api in setup syntax sugar

• defineProps: Child component receives props passed from parent component

• defineEmits: The child component calls the method in the parent component

• defineExpose: The child component exposes properties, which can be obtained in the parent component

2.1defineProps

Parent component code

Child component code

2.2defineEmits

Subcomponent code

Parent component code

2.3defineExpose

Subcomponent code

Parent component code

Supplement: used with ordinary script