温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue3与Vue2 的Props全局组件的异同点有哪些

发布时间:2021-09-17 10:59:52 来源:亿速云 阅读:171 作者:柒染 栏目:web开发

这期内容当中小编将会给大家带来有关Vue3与Vue2 的Props全局组件的异同点有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

Vue3与Vue2 的Props全局组件的异同点有哪些

Vue3 Props

Props 是任何现代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。Vue3 中,在组件中访问Props的方式与 Vue2  会有所不同。

为什么使用 Props 很重要?

首先,我们要了解什么是 props。props是可在组件上注册的自定义属性,可让我们将数据从父组件传递到其子组件方式之一。

由于props让我们能够在组件之间共享数据,因此它使我们可以将Vue项目分解成更多的模块化组件。

Vue3与Vue2 的Props全局组件的异同点有哪些

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 中去找答案,发现也有人提问:

Vue3与Vue2 的Props全局组件的异同点有哪些

尤大,在底部明确说明了不推荐这么做:

Vue3与Vue2 的Props全局组件的异同点有哪些

他建议通过 父组件传入子组件一个 Props 来实现。

为什么 Vue3 props 的工作方式与 Vue2 不同?

更改 Vue3 Props 的方式主要的一个原因,使 this  在组件/方法中的含义更清楚。有时在查看Vue2代码时,this所指可能是模棱两可的。

Vue 团队在设计 Vue3 时的一个大目标是使其在大型项目中更具可伸缩性。其中一部分是将Options API重新设计为Composition  API,以实现更好的代码组织。

Vue3与Vue2 的Props全局组件的异同点有哪些

但是通过消除对 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全局组件的异同点有哪些了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI