Highly recommended! Setup syntax sugar in Vue 3.2

Previous

As a front-end programmer, you must be familiar with Vue 3. As one of the most popular front-end frameworks nowadays, many people use it as an entry-level framework.

However, even though Vue 3 has been put into use a long time ago, some people inevitably complain that Vue 3 has too many and too complicated knowledge points and is updated too quickly. Recently, Vue 3 finalized a new technology: script-setup syntax sugar.

1. What is setup syntax sugar

Initially, Vue 3.0 exposed variables had to be returned before they could be used in the template;

Now we only need to add setup in the script tag. Components only need to be imported without registration, properties and methods do not need to be returned, there is no need to write a setup function, and there is no need to write export default. Even custom instructions can be automatically obtained in our template.

<template>
  <my-component :num="num" @click="addNum" />
</template>

<script setup>
  import { ref } from 'vue';
  import MyComponent from './MyComponent .vue';

  // Write like in normal setup, but don't need to return any variables const num = ref(0) // num defined here can be used directly const addNum = () => { // Functions can also be referenced directly, without returning num.value++ in return
  }
</script>

// Must use camelCase

2. Use the setup component to automatically register

In script setup, the introduced components can be used directly without registering them through components, and the name of the current component cannot be specified. It will automatically be based on the file name, which means there is no need to write the name attribute. Example:

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

<script setup>
  import ziHello from './ziHello'
</script>

3. Add new API after using setup

Since there is no setup function, how do we get props and emit?

The setup script syntax sugar provides a new API for us to use

3.1 defineProps

Used to receive props 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>

Subcomponent code

<template>
  <div>
    I am a subcomponent {{name}} // Zhao Xiaolei========
  </div>
</template>

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

  defineProps({
   name:{
     type:String,
     default:'I am the default value'
   }
 })
</script>

3.2 defineEmits

Child components pass events to parent components. Example:

Subcomponents

<template>
  <div>
    I am the child component {{name}}
    <button @click="ziupdata">Button</button>
  </div>
</template>

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

  //Custom function, parent component can trigger const em=defineEmits(['updata'])
  const ziupdata=()=>{
    em("updata",'I am the value of the child component')
  }

</script>

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); //I am the value of the child component}
</script>

3.3 defineExpose

The component exposes its own properties, which can be obtained in the parent component. Example:

Subcomponents

<template>
  <div>
    I am a child component</div>
</template>

<script setup>
  import { defineExpose, reactive, ref } from 'vue'
  let ziage = ref(18)
  let ziname = reactive({
    name:'Zhao Xiaolei'
  })
  //Exposure variables defineExpose({
    ziage,
    ziname
  })
</script>

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 = () => {
    console.log('Receive the value exposed by ref',zihello.value.ziage)
    console.log('Receive the value exposed by reactive',zihello.value.ziname.name)
  }
</script>

The result obtained by the parent component

How to enable setup syntax sugar in vue3 project

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

1. First, close the vetur plugin of the editor and open Volar

2. Create a new tsconfig.json / jsconfig.json file and add "strict": true and "moduleResolution": "node" configuration items in compilerOptions.

Summarize:

The above is the understanding and knowledge of setup syntax sugar. This article about setup syntax sugar in Vue3.2 is introduced here. For more relevant content about setup syntax sugar in Vue3.2, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!