強(qiáng)烈推薦!Vue3.2中的setup語法糖

更新時(shí)間：2021年12月09日 11:08:03 作者：趙小磊Ben

script?setup是vue3的新語法糖,并不是新增的功能模塊,只是簡化了以往的組合式API必須返回(return)的寫法,并且有更好的運(yùn)行時(shí)性能,這篇文章主要給大家介紹了關(guān)于Vue3.2中setup語法糖的相關(guān)資料,需要的朋友可以參考下

前文

作為一個(gè)前端程序員，說起 Vue 3肯定不會(huì)陌生，作為時(shí)下最火的前端框架之一，很多人將它作為入門框架。

但是盡管 Vue 3很久之前就已經(jīng)開始投入使用，也不免會(huì)有人抱怨 Vue 3的知識(shí)點(diǎn)太多太雜，更新太快。這不，最近 Vue 3又定稿了一項(xiàng)新技術(shù)：script-setup 語法糖。

1.什么是setup語法糖

起初 Vue3.0 暴露變量必須 return 出來，template中才能使用；

現(xiàn)在只需在script標(biāo)簽中添加setup，組件只需引入不用注冊(cè)，屬性和方法也不用返回，也不用寫setup函數(shù)，也不用寫export default ，甚至是自定義指令也可以在我們的template中自動(dòng)獲得。

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

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

  // 像在平常的setup中一樣的寫,但是不需要返回任何變量
  const num= ref(0)       //在此處定義的 num 可以直接使用
  const addNum= () => {   //函數(shù)也可以直接引用,不用在return中返回
    num.value++
  }
</script>

//必須使用駝峰命名

2.使用setup組件自動(dòng)注冊(cè)

在 script setup 中，引入的組件可以直接使用，無需再通過components進(jìn)行注冊(cè)，并且無法指定當(dāng)前組件的名字，它會(huì)自動(dòng)以文件名為主，也就是不用再寫name屬性了。示例：

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

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

3.使用setup后新增API

因?yàn)闆]有了setup函數(shù)，那么props，emit怎么獲取呢

setup script語法糖提供了新的API來供我們使用

3.1 defineProps

用來接收父組件傳來的 props。示例:

父組件代碼

<template>
  <div class="die">
    <h3>我是父組件</h3>
    <zi-hello :name="name"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  import {ref} from 'vue'
  let name = ref('趙小磊========')
</script>

子組件代碼

<template>
  <div>
    我是子組件{{name}} // 趙小磊========
  </div>
</template>

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

  defineProps({
   name:{
     type:String,
     default:'我是默認(rèn)值'
   }
 })
</script>

3.2 defineEmits

子組件向父組件事件傳遞。示例:

子組件

<template>
  <div>
    我是子組件{{name}}
    <button @click="ziupdata">按鈕</button>
  </div>
</template>

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

  //自定義函數(shù)，父組件可以觸發(fā)
  const em=defineEmits(['updata'])
  const ziupdata=()=>{
    em("updata",'我是子組件的值')
  }

</script>

父組件

<template>
  <div class="die">
    <h3>我是父組件</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  const updata = (data) => {
    console.log(data); //我是子組件的值
  }
</script>

3.3 defineExpose

組件暴露出自己的屬性，在父組件中可以拿到。示例:

子組件

<template>
  <div>
    我是子組件
  </div>
</template>

<script setup>
  import {defineExpose,reactive,ref} from 'vue'
  let ziage=ref(18)
  let ziname=reactive({
    name:'趙小磊'
  })
  //暴露出去的變量
  defineExpose({
    ziage,
    ziname
  })
</script>

父組件

<template>
  <div class="die">
    <h3 @click="isclick">我是父組件</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('接收ref暴漏出來的值',zihello.value.ziage)
    console.log('接收reactive暴漏出來的值',zihello.value.ziname.name)
  }
</script>

父組件拿到的結(jié)果

vue3項(xiàng)目如何開啟setup語法糖

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

1.首先要將編輯器的vetur插件關(guān)閉，打開Volar

2.再新建一個(gè)tsconfig.json / jsconfig.json 文件，在compilerOptions里面加上 "strict": true，和? "moduleResolution": "node" 配置項(xiàng)就可以啦

總結(jié)：

以上就是對(duì)setup語法糖的理解和認(rèn)識(shí)，到此這篇關(guān)于Vue3.2中setup語法糖的文章就介紹到這了,更多相關(guān)Vue3.2中setup語法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: