溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue3中props組件抽離的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue3中props組件抽離的方法”吧！
現在假設需要抽象出一個移動端的頂部Header組件，首先想想一個頂部組件平時有哪些功能：名稱、返回、返回主頁、更多功能。
如果某個頁面不需要使用返回主頁這個功能，使用時不進行參數傳遞即可。
設置好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部分，比如說點擊回退標簽后觸發某個事件，那么就會在身為調用者的父組件中綁定某個回調函數，在子組件emit后執行該函數。
因此在和props同級的情況下聲明將要emit的函數名稱。
這里貼出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>其實正確的方法應該是，先在多個頁面中編碼完畢后再抽離組件。
不過這里只是演示作用，所以就提前清除了具體需要抽離出什么內容。
接下來貼出部分調用者組件當中的代碼。
<!-- 展示頂部標簽名 --> <s-header :name="'商品詳情'"></s-header> <!-- 綁定子組件emit的方法，當抽離組件emit的時候觸發close方法 --> <s-header :name="'訂單詳情'" @callback="close"></s-header> <!-- 設置返回主頁的按鈕為true --> <s-header :name="'購物車'" :home="true"></s-header>
這樣我們就成功的抽離出來了一個簡單的組件，通過父組件的傳值來進行不同的顯示。
當然，抽離組件可以進階，比如使用slot插槽，用法和以前一樣。
<!-- 父 --> <s-header :name="'關于我們'"> <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>
感謝各位的閱讀，以上就是“vue3中props組件抽離的方法”的內容了，經過本文的學習后，相信大家對vue3中props組件抽離的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
