[[397409]]

Vue3 Props

Props 是任何現(xiàn)代 JS 框架的重要組成部分。在組件之間傳遞數(shù)據(jù)的能力是Vue項目的基本要素。Vue3 中，在組件中訪問Props的方式與 Vue2 會有所不同。

為什么使用 Props 很重要?

首先，我們要了解什么是 props。props是可在組件上注冊的自定義屬性，可讓我們將數(shù)據(jù)從父組件傳遞到其子組件方式之一。

由于props讓我們能夠在組件之間共享數(shù)據(jù)，因此它使我們可以將Vue項目分解成更多的模塊化組件。

props 示例

Vue3 之前，組件的props只是 this 對象的一部分，可以使用this.propName進行訪問。

但是，Vue3的一大變化是setup方法的引入。

setup方法包含了幾乎所有過去被分隔成不同的選項，如data，computed，watch等。關(guān)于setup方法的需要重點注意的是，它里面沒有 this。

那么我們?nèi)绾尾皇褂胻his來使用Vue3 props 呢?

其實超級簡單，setup方法實際上有兩個參數(shù):

1. props – 包含組件的 props 的對象。
2. 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 團隊在設(shè)計 Vue3 時的一個大目標是使其在大型項目中更具可伸縮性。其中一部分是將Options API重新設(shè)計為Composition API，以實現(xiàn)更好的代碼組織。

但是通過消除對 this 的大多數(shù)引用，而是使用顯式的context和props變量，可以提高大型Vue項目的可讀性。

如何注冊 Vue3 全局組件

現(xiàn)在，我們來看看如何注冊Vue3全局組件，方便在我們整個項目都能訪問。與我們在Vue2中聲明它們的方式稍有不同，但也是非常簡單。

什么是全局組件

首先，我們要還了解Vue3全局組件是什么以及為什么要使用它。

通常，當我們想在 Vue 實例中包含一個組件時，我們會在本地注冊它，一般是這樣使用：

<script> 
import PopupWindow from '../components/PopupWindow.vue'; 
 
export default { 
  components: { 
    PopupWindow 
  } 
} 
</script> 

但是，假設(shè)有一個組件，我們知道它會在多個文件中多次使用。所以在每個文件都需要寫一遍上述的代碼-尤其是在我們重構(gòu)了項目或進行某些操作的情況下，就會比較麻煩。

在這種情況下，全局注冊組件是有用的，這樣就可以在主根Vue實例的所有子組件中訪問該組件。換句話說，全局注冊一個組件意味著我們不必在每個文件中導(dǎo)入它。

Vue2 中全局組件是如何工作的

在Vue2中，無論我們在哪里創(chuàng)建Vue實例，我們都只需要調(diào)用Vue.component方法來注冊全局組件。

這個方法有兩個參數(shù)：

1. 全局組件的名稱
2. 我們的組件本身

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)用程序。然后，可以像以前一樣運行相同的.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)系大遷世界公眾號。