建站
咨詢
售后
建站咨詢
新聞中心
Vue3 Props
Props 是任何現(xiàn)代 JS 框架的重要組成部分。在組件之間傳遞數(shù)據(jù)的能力是Vue項目的基本要素。Vue3 中，在組件中訪問Props的方式與 Vue2 會有所不同。
創(chuàng)新互聯(lián)服務(wù)項目包括金沙網(wǎng)站建設(shè)、金沙網(wǎng)站制作、金沙網(wǎng)頁制作以及金沙網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，金沙網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到金沙省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
為什么使用 Props 很重要?
首先，我們要了解什么是 props。props是可在組件上注冊的自定義屬性，可讓我們將數(shù)據(jù)從父組件傳遞到其子組件方式之一。
由于props讓我們能夠在組件之間共享數(shù)據(jù)，因此它使我們可以將Vue項目分解成更多的模塊化組件。
props 示例
Vue3 之前，組件的props只是 this 對象的一部分，可以使用this.propName進(jìn)行訪問。
但是，Vue3的一大變化是setup方法的引入。
setup方法包含了幾乎所有過去被分隔成不同的選項，如data，computed，watch等。關(guān)于setup方法的需要重點注意的是，它里面沒有 this。
那么我們?nèi)绾尾皇褂胻his來使用Vue3 props 呢?
其實超級簡單，setup方法實際上有兩個參數(shù):
- props – 包含組件的 props 的對象。
- context – 一個對象，它包含了在this上能找到的特定屬性。
context 官方文檔里只說明了有 attrs, slots, 和 emit()。
來個示例：
- setup (props, context) {
- console.log(props.propName) // access a prop to our component
- }
做項目中發(fā)現(xiàn)，其實 context 還有一個 exposed，這個是用來暴露 setup 中方法的，就是父組件能訪問到子組件中 setup 里面的方法。這個在項目中有遇到過這個需求，所以我也去 Vue github 上Issues 中去找答案，發(fā)現(xiàn)也有人提問：
尤大，在底部明確說明了不推薦這么做：
他建議通過 父組件傳入子組件一個 Props 來實現(xiàn)。
為什么 Vue3 props 的工作方式與 Vue2 不同?
更改 Vue3 Props 的方式主要的一個原因，使 this 在組件/方法中的含義更清楚。有時在查看Vue2代碼時，this所指可能是模棱兩可的。
Vue 團(tuán)隊在設(shè)計 Vue3 時的一個大目標(biāo)是使其在大型項目中更具可伸縮性。其中一部分是將Options API重新設(shè)計為Composition API，以實現(xiàn)更好的代碼組織。
但是通過消除對 this 的大多數(shù)引用，而是使用顯式的context和props變量，可以提高大型Vue項目的可讀性。
如何注冊 Vue3 全局組件
現(xiàn)在，我們來看看如何注冊Vue3全局組件，方便在我們整個項目都能訪問。與我們在Vue2中聲明它們的方式稍有不同，但也是非常簡單。
什么是全局組件
首先，我們要還了解Vue3全局組件是什么以及為什么要使用它。
通常，當(dāng)我們想在 Vue 實例中包含一個組件時，我們會在本地注冊它，一般是這樣使用：
但是，假設(shè)有一個組件，我們知道它會在多個文件中多次使用。所以在每個文件都需要寫一遍上述的代碼-尤其是在我們重構(gòu)了項目或進(jìn)行某些操作的情況下，就會比較麻煩。
在這種情況下，全局注冊組件是有用的，這樣就可以在主根Vue實例的所有子組件中訪問該組件。換句話說，全局注冊一個組件意味著我們不必在每個文件中導(dǎo)入它。
Vue2 中全局組件是如何工作的
在Vue2中，無論我們在哪里創(chuàng)建Vue實例，我們都只需要調(diào)用Vue.component方法來注冊全局組件。
這個方法有兩個參數(shù)：
- 全局組件的名稱
- 我們的組件本身
- import Vue from 'vue'
- import PopupWindow from './components/PopupWindow'
- import App from './App.vue'
- Vue.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
- new Vue({
- render: h => h(App)
- }).$mount('#app')
現(xiàn)在，此 PopupWindow 組件可以在此Vue實例的所有子級中使用。
那么在 Vue3 中呢
在Vue3中，由于創(chuàng)建Vue實例的工作方式略有不同(使用createApp)，所以代碼略有不同，但理解起來同樣簡單。
比起從Vue2對象中聲明全局組件，我們首先必須創(chuàng)建我們的應(yīng)用程序。然后，可以像以前一樣運(yùn)行相同的.component方法。
- import { createApp } from 'vue'
- import PopupWindow from './components/PopupWindow'
- import App from "./App.vue"
- const app = createApp(App)
- app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
- app.mount('#app')
~完，我是刷碗智，我要去刷碗了，骨的白!
作者：Matt Maribojoc 譯者：前端小智 來源：stackabuse
原文：
https://leavue.co/2020/08/an-introduction-to-vue3-props-a-beinners-guide/ https://leavue.co/2020/08/how-to-register-a-vue3-global-component/
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
新聞標(biāo)題：總結(jié)一下，Vue3與Vue2的Props、全局組件的異同點！
地址分享：http://www.dlmjj.cn/article/djejcdc.html
