乐趣区

关于javascript:Vue3-与-Vue2-的Props全局组件的异同点

jiezi

作者：Matt Maribojoc
译者：前端小智
起源：stackabuse

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

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. props – 蕴含组件的 props 的对象。
  2. 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. 全局组件的名称
  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')

当初，此 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')

~ 完，我是刷碗智，我要去刷碗了，骨的白！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：

https://leavue.co/2020/08/an-…
https://leavue.co/2020/08/how…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版