Vue3中setup?script怎么用

這篇文章主要為大家展示了“Vue3中setup script怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue3中setup script怎么用”這篇文章吧。

前言

Vue3已經(jīng)發(fā)布很長(zhǎng)一段時(shí)間了，相信大多數(shù)前端人都已經(jīng)上手把玩過了，其中比較大的一個(gè)特性就是setup方法，可以讓我們非常直觀和方便的組合我們的業(yè)務(wù)邏輯和hooks。在setup里面返回的變量可以直接在template里面使用。大多數(shù)情況下，我們的大部分邏輯都集中在setup方法里面，所以官方提供了一個(gè)實(shí)驗(yàn)性的寫法，直接在script里面寫setup的內(nèi)容，即：setup script。

使用

我們之前的組件可能是這樣的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";
export default defineComponent({
  components: {
    Card,
  },
  setup() {
    const msg = ref("setup script");
    return { msg };
  }
});
</script>

這里做了兩件事，一個(gè)是導(dǎo)入并注冊(cè)組件，一個(gè)是導(dǎo)出一個(gè)字符串給template使用。

啟用setup script之后是這樣的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Card from "./components/Card.vue";
const msg = ref("setup script");
</script>

這里省去了組件的注冊(cè)步驟，也沒有顯式的導(dǎo)出變量的動(dòng)作。

雖然是實(shí)驗(yàn)性功能，但還是開箱即用，你只需要在script上配置setup即可。

導(dǎo)出變量&方法

在setup script里面定義的所有變量都會(huì)自動(dòng)導(dǎo)出。非常方便

<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () => {
  console.log("on click");
};
</script>

使用組件

所有的組件導(dǎo)入即可自動(dòng)注冊(cè)：

<script lang="ts" setup>
import Card from "./components/Card.vue";
import Button from "./components/Button.vue";
</script>

使用props - defineProps

使用props需要用到defineProps來定義，具體用法跟之前的props寫法類似：

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>

給props定義類型：

const props = defineProps({
  title: String,
  content: {
      type: Stirng,
      required: true
  }
});

使用TS的注解的方式：

defineProps<{
  title?: string
  content: string
}>();

使用emits - defineEmit

使用defineEmit對(duì)組件里面使用到的事件進(jìn)行驗(yàn)證和定義：

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')

// 對(duì)事件進(jìn)行驗(yàn)證
const emit = defineEmit({
    onHeaderClick: ({title}) => {
        if(!title) {
            console.warn('Invalid title')
            return false
        }
        return true
    }
})

具體的用法跟之前的一樣。

使用context - useContext

使用useContext獲取上下文：

import { useContext } from 'vue'
const { slots, attrs } = useContext()

獲取到的slots attrs跟之前的setup里面的是一樣的。

指令

指令跟組件一樣，導(dǎo)入自定注冊(cè)：

<script setup>
  import {color} from './v-color'
</script>

<template>
  <div v-color />
</template>

導(dǎo)入的color自動(dòng)映射為指令v-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template>
  <div v-super-color />
</template>

總結(jié)

setup script代碼看起來簡(jiǎn)單了很多，開發(fā)效率大大的提高。但是很遺憾它還只是一個(gè)實(shí)驗(yàn)性功能，提出的時(shí)間是：2020-10-28，至今還未發(fā)布。

不過好消息是：

不管怎么樣，小伙伴可以在本地體驗(yàn)一波，會(huì)整體提升幸福感。

記住不要在生產(chǎn)環(huán)境使用哦。

以上是“Vue3中setup script怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！