總結(jié)一下，Vue3 與 Vue2 的Props、全局組件的異同點(diǎn)！
Vue3 Props
Props 是任何現(xiàn)代 JS 框架的重要組成部分。在組件之間傳遞數(shù)據(jù)的能力是Vue項(xiàng)目的基本要素。Vue3 中，在組件中訪問(wèn)Props的方式與 Vue2 會(huì)有所不同。
為什么使用 Props 很重要?
首先，我們要了解什么是 props。props是可在組件上注冊(cè)的自定義屬性，可讓我們將數(shù)據(jù)從父組件傳遞到其子組件方式之一。
由于props讓我們能夠在組件之間共享數(shù)據(jù)，因此它使我們可以將Vue項(xiàng)目分解成更多的模塊化組件。
props 示例
Vue3 之前，組件的props只是 this 對(duì)象的一部分，可以使用this.propName進(jìn)行訪問(wèn)。
但是，Vue3的一大變化是setup方法的引入。
setup方法包含了幾乎所有過(guò)去被分隔成不同的選項(xiàng)，如data，computed，watch等。關(guān)于setup方法的需要重點(diǎn)注意的是，它里面沒(méi)有 this。
那么我們?nèi)绾尾皇褂胻his來(lái)使用Vue3 props 呢?
其實(shí)超級(jí)簡(jiǎn)單，setup方法實(shí)際上有兩個(gè)參數(shù):
- props – 包含組件的 props 的對(duì)象。
- context – 一個(gè)對(duì)象，它包含了在this上能找到的特定屬性。
context 官方文檔里只說(shuō)明了有 attrs, slots, 和 emit()。
來(lái)個(gè)示例：
- setup (props, context) {
- console.log(props.propName) // access a prop to our component
- }
做項(xiàng)目中發(fā)現(xiàn)，其實(shí) context 還有一個(gè) exposed，這個(gè)是用來(lái)暴露 setup 中方法的，就是父組件能訪問(wèn)到子組件中 setup 里面的方法。這個(gè)在項(xiàng)目中有遇到過(guò)這個(gè)需求，所以我也去 Vue github 上Issues 中去找答案，發(fā)現(xiàn)也有人提問(wèn)：
尤大，在底部明確說(shuō)明了不推薦這么做：
他建議通過(guò) 父組件傳入子組件一個(gè) Props 來(lái)實(shí)現(xiàn)。
為什么 Vue3 props 的工作方式與 Vue2 不同?
更改 Vue3 Props 的方式主要的一個(gè)原因，使 this 在組件/方法中的含義更清楚。有時(shí)在查看Vue2代碼時(shí)，this所指可能是模棱兩可的。
Vue 團(tuán)隊(duì)在設(shè)計(jì) Vue3 時(shí)的一個(gè)大目標(biāo)是使其在大型項(xiàng)目中更具可伸縮性。其中一部分是將Options API重新設(shè)計(jì)為Composition API，以實(shí)現(xiàn)更好的代碼組織。
但是通過(guò)消除對(duì) this 的大多數(shù)引用，而是使用顯式的context和props變量，可以提高大型Vue項(xiàng)目的可讀性。
如何注冊(cè) Vue3 全局組件
現(xiàn)在，我們來(lái)看看如何注冊(cè)Vue3全局組件，方便在我們整個(gè)項(xiàng)目都能訪問(wèn)。與我們?cè)赩ue2中聲明它們的方式稍有不同，但也是非常簡(jiǎn)單。
什么是全局組件
首先，我們要還了解Vue3全局組件是什么以及為什么要使用它。
通常，當(dāng)我們想在 Vue 實(shí)例中包含一個(gè)組件時(shí)，我們會(huì)在本地注冊(cè)它，一般是這樣使用：
- <script>
- import PopupWindow from '../components/PopupWindow.vue';
- export default {
- components: {
- PopupWindow
- }
- }
- </script>
但是，假設(shè)有一個(gè)組件，我們知道它會(huì)在多個(gè)文件中多次使用。所以在每個(gè)文件都需要寫一遍上述的代碼-尤其是在我們重構(gòu)了項(xiàng)目或進(jìn)行某些操作的情況下，就會(huì)比較麻煩。
在這種情況下，全局注冊(cè)組件是有用的，這樣就可以在主根Vue實(shí)例的所有子組件中訪問(wèn)該組件。換句話說(shuō)，全局注冊(cè)一個(gè)組件意味著我們不必在每個(gè)文件中導(dǎo)入它。
Vue2 中全局組件是如何工作的
在Vue2中，無(wú)論我們?cè)谀睦飫?chuàng)建Vue實(shí)例，我們都只需要調(diào)用Vue.component方法來(lái)注冊(cè)全局組件。
這個(gè)方法有兩個(gè)參數(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實(shí)例的所有子級(jí)中使用。
那么在 Vue3 中呢
在Vue3中，由于創(chuàng)建Vue實(shí)例的工作方式略有不同(使用createApp)，所以代碼略有不同，但理解起來(lái)同樣簡(jiǎn)單。
比起從Vue2對(duì)象中聲明全局組件，我們首先必須創(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 譯者：前端小智 來(lái)源：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)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
