作者：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 anywherenew 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 anywhereapp.mount('#app')

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

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

原文：

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

交换

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

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