Vue3與Vue2 的Props全局組件的異同點有哪些

這期內容當中小編將會給大家帶來有關Vue3與Vue2 的Props全局組件的異同點有哪些，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Vue3 Props

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

為什么使用 Props 很重要?

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

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

props 示例

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

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

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

那么我們如何不使用this來使用Vue3 props 呢?

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

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. props – 包含組件的 props 的對象。

3. context – 一個對象，它包含了在this上能找到的特定屬性。

context 官方文檔里只說明了有 attrs, slots, 和 emit()。

來個示例：

setup (props, context) {     console.log(props.propName) // access a prop to our component }

做項目中發現，其實 context 還有一個 exposed，這個是用來暴露 setup 中方法的，就是父組件能訪問到子組件中 setup  里面的方法。這個在項目中有遇到過這個需求，所以我也去 Vue github 上Issues 中去找答案，發現也有人提問：

尤大，在底部明確說明了不推薦這么做：

他建議通過 父組件傳入子組件一個 Props 來實現。

為什么 Vue3 props 的工作方式與 Vue2 不同?

更改 Vue3 Props 的方式主要的一個原因，使 this  在組件/方法中的含義更清楚。有時在查看Vue2代碼時，this所指可能是模棱兩可的。

Vue 團隊在設計 Vue3 時的一個大目標是使其在大型項目中更具可伸縮性。其中一部分是將Options API重新設計為Composition  API，以實現更好的代碼組織。

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

如何注冊 Vue3 全局組件

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

什么是全局組件

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

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

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

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

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

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

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

這個方法有兩個參數：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 全局組件的名稱

3. 我們的組件本身

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')

現在，此 PopupWindow 組件可以在此Vue實例的所有子級中使用。

那么在 Vue3 中呢

在Vue3中，由于創建Vue實例的工作方式略有不同(使用createApp)，所以代碼略有不同，但理解起來同樣簡單。

比起從Vue2對象中聲明全局組件，我們首先必須創建我們的應用程序。然后，可以像以前一樣運行相同的.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')

上述就是小編為大家分享的Vue3與Vue2 的Props全局組件的異同點有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。