vue3中的props組件抽離

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

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

props組件抽離

引言

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

vue3中setup函數(shù)的使用

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

在了解了概念后我們可以在本文中動手抽象分離一個組件。

場景

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

如果某個頁面不需要使用返回主頁這個功能，使用時不進行參數(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部分，比如說點擊回退標簽后觸發(fā)某個事件，那么就會在身為調(diào)用者的父組件中綁定某個回調(diào)函數(shù)，在子組件emit后執(zhí)行該函數(shù)。

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

這里貼出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>

其實正確的方法應該是，先在多個頁面中編碼完畢后再抽離組件。

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

接下來貼出部分調(diào)用者組件當中的代碼。

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

這樣我們就成功的抽離出來了一個簡單的組件，通過父組件的傳值來進行不同的顯示。

當然，抽離組件可以進階，比如使用slot插槽，用法和以前一樣。

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

組件模板抽離的寫法

方法一：使用JavaScript標簽分離模板
方法二：使用template標簽分離模板

<!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>

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

您可能感興趣的文章: