作者：MattMaribojoc译者：前端小智来源：stackabuse有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue3PropsProps是任何现代JS框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。在Vue3中，在组件中访问props的方式会和Vue2有所不同。为什么使用Props很重要？首先，我们需要了解什么是道具。道具是可以在组件上注册的自定义属性，允许我们将数据从父组件传递到其子组件之一。由于props允许我们在组件之间共享数据，它允许我们将Vue项目分解为更多模块化组件。props示例在Vue3之前，组件的props只是this对象的一部分，可以使用this.propName访问。但是，Vue3的一大变化是引入了setup方法。setup方法包含几乎所有以前被分成不同选项的选项，例如data、computed、watch等。关于setup方法需要注意的重要一点是它里面没有this。那么我们如何在不使用this的情况下使用Vue3props呢？非常简单，setup方法实际上有两个参数：props-一个包含组件props的对象。context–包含在this上找到的特定属性的对象。context官方文档只说有attrs、slots、emit()。举个例子：setup(props,context){console.log(props.propName)//accessaproptoourcomponent}在项目中找到，其实context还有一个exposed，就是用来暴露methodinthesetup，是父组件可以访问到子组件中setup的方法。我在项目中遇到过这个需求，于是也去Vuegithub上的Issues找答案，发现也有人问：游达，在最底下明确说明不建议这样做：hesuggestedpassingthechild通过父组件组件实现了一个Props。为什么Vue3道具的工作方式与Vue2不同？改变Vue3props完成方式的主要原因之一是为了更清楚这在组件/方法中的含义。有时在查看Vue2代码时，this所指的内容可能不明确。Vue团队在设计Vue3时的一大目标是使其在大型项目中更具可扩展性。其中一部分是将OptionsAPI重新设计为CompositionAPI，以更好地组织代码。但它通过消除对this的大部分引用并使用显式上下文和props变量来提高大型Vue项目的可读性。如何注册Vue3全局组件现在，让我们看一下如何注册Vue3全局组件，以便我们整个项目都可以访问它们。与我们在Vue2中声明它们的方式略有不同，但也非常简单。什么是全局组件首先，我们还需要了解什么是Vue3全局组件以及为什么要使用它。通常，当我们想在Vue实例中包含一个组件时，我们会在本地注册它，通常是这样的：但是，假设有一个我们知道将在多个文件中多次使用的组件。所以我们需要在每个文件中都写上上面的代码——尤其是我们重构项目或者进行一些操作的时候，会比较麻烦。在这种情况下，全局注册组件很有用，这样它就可以在主根Vue实例的所有子组件中访问。换句话说，全局注册一个组件意味着我们不必在每个文件中都导入它。Vue2中全局组件的工作原理在Vue2中，无论我们在哪里创建Vue实例，只需要调用Vue.component方法注册全局组件即可。此方法有两个参数：全局组件的名称我们的组件本身)//全局注册-可以在任何地方使用newVue({render:h=>h(App)}).$mount('#app')现在这个PopupWindow组件可以在这个Vue实例的所有孩子中使用。那么在Vue3中呢？在Vue3中，由于创建Vue实例的方式略有不同（使用createApp），因此代码略有不同，但同样易于理解。我们首先必须创建我们的应用程序，而不是从Vue2对象声明全局组件。然后，可以像以前一样运行相同的.component方法。import{createApp}from'vue'importPopupWindowfrom'./components/PopupWindow'importAppfrom"./App.vue"constapp=createApp(App)app.component('PopupWindow',PopupWindow)//全局注册-哪里都可以用app.mount('#app')~终于洗碗了，我去洗碗了，骨头都白了！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://leavue.co/2020/08/an-...https://leavue.co/2020/08/how...交流有梦想，有干货，微信搜索【大搬来世界]关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
