This is the fifth day of my participation in the Novembermore Challenge

above

As a front-end programmer, Vue 3 is certainly familiar. As one of the most popular front-end frameworks, many people use it as a starter framework.

But even though Vue 3 has been around for a long time, there have been complaints that it’s too cluttered and too fast to update. A new technology has recently been finalized for Vue 3: script-Setup syntax sugar.

1. What is setup syntax sugar

  • At first Vue3.0 exposed variables must bereturnCome out,templateTo use;

Now we just add setup to the script tag, we just import components without registration, we don’t have to return properties and methods, we don’t have to write setup functions, we don’t have to write export default, and even custom instructions can be obtained automatically in our template.

<template> <my-component :num="num" @click="addNum" /> </template> <script setup> import { ref } from 'vue'; import MyComponent from './MyComponent .vue'; Const addNum= () => {const addNum= () => {const addNum= () => {const addNum= () => Num. Value++} </script> // must use camel nameCopy the code

2. Use the Setup component to automatically register

In Script Setup, imported components can be used directly without having to register with components, and there is no way to specify the name of the current component, which automatically takes precedence over the file name, i.e. no need to write the name attribute. Example:

<template>
    <zi-hello></zi-hello>
</template>

<script setup>
  import ziHello from './ziHello'
</script>
Copy the code

3. Add apis after setup

Because there is no setup function, how do I get props and emit

The Setup Script syntax sugar provides a new API for us to use

3.1 defineProps

Props for receiving messages from the parent component. Example:

Parent component code

<template> <div class="die"> <h3> I am the parent component </h3> <zi-hello :name="name"></zi-hello> </div> </template> <script setup> import ZiHello from './ziHello' import {ref} from 'vue' let name = ref(' ========') </script>Copy the code

Subcomponent code

======== </div> </template> <script setup> import {defineProps} from 'vue' DefineProps ({name:{type:String, default:' I'm the default '}}) </script>Copy the code

3.2 defineEmits

Child component passes to parent component events. Example:

Child components

<template> <div> I am a child component {{name}} < button@click ="ziupdata"> button </button> </div> </template> <script setup> import {defineEmits} from 'vue' Parent component can trigger const em=defineEmits(['updata']) const ziupdata=()=>{em("updata",' I am the value of the child component ')} </script>Copy the code

The parent component

<template> <div class="die"> <h3> I am the parent component </h3> <zi-hello @updata="updata"></zi-hello> </div> </template> <script setup> import ziHello from './ziHello' const updata = (data) => { console.log(data); } </script>Copy the code

3.3 defineExpose

The component exposes its own properties, available in the parent component. Example:

Child components

< the template > < div > I am a child component < / div > < / template > < script setup > import {defineExpose, reactive, ref} from 'vue' let ziage = ref (18) DefineExpose ({ziage, ziname}) </script>Copy the code

The parent component

<template> <div class="die"> < h3@click ="isclick"> I am the parent component </h3> <zi-hello ref="zihello"></zi-hello> </div> </template> <script setup> import ziHello from './ziHello' import {ref} from 'vue' const zihello = ref() const isclick = () => { The console. The log (' receiving ref critical leak out the value of the 'zihello. Value. Ziage) console. The log (' receiving reactive critical leak out the value of the' zihello. Value. Ziname. Name)} < / script >Copy the code

The result obtained by the parent component

Conclusion:

This is the setup syntax sugar understanding and understanding, summary shortcomings and understanding of the place, welcome to point out the discussion.