Vue3與Vue2 的Props全局組件的異同點(diǎn)有哪些

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Vue3與Vue2 的Props全局組件的異同點(diǎn)有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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)注意的是，它里面沒有  this。

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

其實(shí)超級(jí)簡(jiǎn)單，setup方法實(shí)際上有兩個(gè)參數(shù):

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. props – 包含組件的 props 的對(duì)象。

3. 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ù)：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

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

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

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