vue3中的props組件抽離

更新時(shí)間：2022年04月23日 09:28:21 作者：黑貓幾絳

這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

props組件抽離

引言

假設(shè)你已經(jīng)了解了Vue3的setup函數(shù)，不了解的話(huà)可以先看看這篇文章。

在setup函數(shù)中我們知道它有兩個(gè)參數(shù)，用于接收父組件傳遞參數(shù)的props、與負(fù)責(zé)表示上下文對(duì)象的context，在context中常用的是分發(fā)自定義事件的函數(shù)emit，用于組件抽象化后的通信。

在了解了概念后我們可以在本文中動(dòng)手抽象分離一個(gè)組件。

場(chǎng)景

現(xiàn)在假設(shè)需要抽象出一個(gè)移動(dòng)端的頂部Header組件，首先想想一個(gè)頂部組件平時(shí)有哪些功能：名稱(chēng)、返回、返回主頁(yè)、更多功能。

如果某個(gè)頁(yè)面不需要使用返回主頁(yè)這個(gè)功能，使用時(shí)不進(jìn)行參數(shù)傳遞即可。

設(shè)置好props后在setup中打印props可以看到成功綁定的傳參。

export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    home: {
      type: Boolean,
      default: false
    },
    more: {
      type: Boolean,
      default: false
    }
  }
}

在處理完props傳參后我們可以考慮context部分，比如說(shuō)點(diǎn)擊回退標(biāo)簽后觸發(fā)某個(gè)事件，那么就會(huì)在身為調(diào)用者的父組件中綁定某個(gè)回調(diào)函數(shù)，在子組件emit后執(zhí)行該函數(shù)。

因此在和props同級(jí)的情況下聲明將要emit的函數(shù)名稱(chēng)。

這里貼出template部分與script部分的代碼。

<template>
? <header class="simple-header van-hairline--bottom">
? ? <i v-if="!home" class="nbicon nbfanhui" @click="goBack"></i>
? ? <i v-else class="nbicon nbhome"></i>
? ? <div class="simple-header-name">{{ name }}</div>
? ? <i v-if="more" class="nbicon nbmore"></i>
? </header>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
? props: {
? ? name: {
? ? ? type: String,
? ? ? default: ''
? ? },
? ? back: {
? ? ? type: String,
? ? ? default: ''
? ? },
? ? home: {
? ? ? type: Boolean,
? ? ? default: false
? ? },
? ? more: {
? ? ? type: Boolean,
? ? ? default: false
? ? }
? },
? emits: ['callback'],
? setup(props, context) {
? ? const home = ref(props.home)
? ? const more = ref(props.more)
? ? const router = useRouter()
? ? const goBack = () => {
? ? ? if (!props.back) {
? ? ? ? router.go(-1)
? ? ? } else {
? ? ? ? router.push({ path: props.back })
? ? ? }
? ? ? context.emit('callback')
? ? }
? ? return {
? ? ? goBack,
? ? ? home
? ? }
? }
}
</script>

其實(shí)正確的方法應(yīng)該是，先在多個(gè)頁(yè)面中編碼完畢后再抽離組件。

不過(guò)這里只是演示作用，所以就提前清除了具體需要抽離出什么內(nèi)容。

接下來(lái)貼出部分調(diào)用者組件當(dāng)中的代碼。

<!-- 展示頂部標(biāo)簽名 --> 
<s-header :name="'商品詳情'"></s-header>
 
<!-- 綁定子組件emit的方法，當(dāng)抽離組件emit的時(shí)候觸發(fā)close方法 -->
<s-header :name="'訂單詳情'" @callback="close"></s-header>
 
<!-- 設(shè)置返回主頁(yè)的按鈕為true -->
<s-header :name="'購(gòu)物車(chē)'" :home="true"></s-header>

這樣我們就成功的抽離出來(lái)了一個(gè)簡(jiǎn)單的組件，通過(guò)父組件的傳值來(lái)進(jìn)行不同的顯示。

當(dāng)然，抽離組件可以進(jìn)階，比如使用slot插槽，用法和以前一樣。

<!-- 父 -->
<s-header :name="'關(guān)于我們'">
    <template v-slot:test>
        hello 黑貓幾絳！
    </template>
</s-header>
 
<!-- 子 -->
<slot name="test"></slot>

組件模板抽離的寫(xiě)法

方法一：使用JavaScript標(biāo)簽分離模板
方法二：使用template標(biāo)簽分離模板

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<cpn></cpn>
?? ??? ??? ?<tmp></tmp>
?? ??? ?</div>
?? ?</body>
?? ?<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
?? ?<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
?? ?<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: