vue3中props組件抽離的方法

發(fā)布時(shí)間：2022-04-24 10:54:20 來(lái)源：億速云閱讀：592 作者：zzz 欄目：開發(fā)技術(shù)

這篇文章主要講解了“vue3中props組件抽離的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue3中props組件抽離的方法”吧！

props組件抽離

場(chǎng)景

現(xiàn)在假設(shè)需要抽象出一個(gè)移動(dòng)端的頂部Header組件，首先想想一個(gè)頂部組件平時(shí)有哪些功能：名稱、返回、返回主頁(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
    }
  }
}

vue3中props組件抽離的方法

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

因此在和props同級(jí)的情況下聲明將要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>

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

不過這里只是演示作用，所以就提前清除了具體需要抽離出什么內(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)物車'" :home="true"></s-header>

這樣我們就成功的抽離出來(lái)了一個(gè)簡(jiǎn)單的組件，通過父組件的傳值來(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>

組件模板抽離的寫法

方法一：使用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>

感謝各位的閱讀，以上就是“vue3中props組件抽離的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue3中props組件抽離的方法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

vue3中props組件抽離的方法

props組件抽離

場(chǎng)景

組件模板抽離的寫法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽