深入了解 Vue 3 组件间通信机制

这篇具有很好参考价值的文章主要介绍了深入了解 Vue 3 组件间通信机制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是组件?

在 Vue3 中,组件是构建应用界面的核心概念之一。组件可以看作是可复用、自包含和可组合的代码块,用于封装 UI 元素和相应的行为逻辑。

通俗来说就是,组件(Component)是一种对数据和方法的简单封装,每一个组件有自己单独的逻辑,并且可以分别管理。不同的组件组合在一起,就形成了页面。所以,每一个Web页面可以抽象成是不同组件组合而成的,页面只是这些组件的一个容器。并且这些组件可以在不影响程序运行的情况下,随时被替换,利用这种组件化的思想可以将一个巨大的东西拆分成很多小模块,也是现代前端框架的核心思想之一。

在 Vue 中,通常一个应用会以一颗嵌套的组件树的形式来组织,如图所示:

深入了解 Vue 3 组件间通信机制,Vue3,vue.js,前端,javascript

上图中将整体页面为一个根组件,然后根组件下有三个子组件,分别是页头组件、内容区组件和侧边栏组件。在内容区组件下,又细分出两个内容组件,而侧边栏组件则有三个侧边栏内容组件。所有组件整齐排列,按照树形结构组合,这就是 Vue 内组件的组织结构。

另外 Vue 3 的组件还具有以下特点:

  1. 模块化:组件以模块化的方式进行定义和使用,每个组件都有独立的作用域,使得代码更加结构化和可维护。组件可根据需要进行拆分,形成层次化的组件树结构。

  2. 复用性:组件是可复用的,可以在应用中多次使用。通过将 UI 元素和相关的逻辑封装为组件,可以避免代码重复,并且可以轻松地在不同的上下文中重用组件。

  3. 可组合性:组件可以通过父子组件之间的嵌套与组合,形成更大规模的应用界面。通过传递属性 prop 和监听事件 emit,组件之间可以进行数据和通信的交互。

  4. 响应式:组件内部的数据可以使用 Vue 3 的响应式系统进行管理,当数据发生变化时,组件会自动更新视图。通过响应式系统,可以实现数据的双向绑定和自动渲染。

  5. 生命周期钩子函数:Vue 3 的组件具有一系列的生命周期钩子函数,用于在组件不同的生命周期阶段执行特定的代码逻辑。生命周期钩子函数可以帮助开发者控制组件的行为和实现特定的功能。

  6. 单文件组件:Vue 3 支持使用单文件组件(.vue 文件)的方式来定义和编写组件。单文件组件将组件的模板、样式和逻辑都封装在一个文件中,提高了代码的可读性和维护性。

组件定义

一个 Vue 组件的结构通常包括三个部分:模板(Template)、脚本(Script)和样式(Style)。这些部分一般会放在一个单文件组件(.vue 文件)中,也可以分离成三个独立的文件。

下面是一个典型的 Vue 组件的结构示例:

<template>
  <!-- 模板部分 -->
</template>

<script setup>
  // 脚本部分
</script>

<style>
  /* 样式部分 */
  /* CSS 样式规则 */
</style>

其中:

  1. 模板(Template):模板部分定义了组件的结构和布局,使用 HTML 和 Vue 的模板语法编写。在模板中可以插入动态数据和表达式,并通过指令(如 v-bindv-if)和事件绑定等方式与组件的数据和行为进行交互。

  2. 脚本(Script):脚本部分是组件的逻辑核心,使用 JavaScript 或 TypeScript 编写。在脚本中,可以定义组件的属性、计算属性、方法、生命周期钩子函数等。通过脚本,可以处理组件的数据逻辑、事件响应等功能。

  3. 样式(Style):样式部分定义了组件的样式规则,使用 CSS 或预处理器(如 Sass、Less)编写。可以为组件元素添加类名、样式选择器等,来对组件进行样式修饰和美化。

这种将模板、脚本和样式封装在一个单文件组件中的方式,可以提高代码的可读性和维护性,并且使得组件的结构更加清晰和独立。通过单文件组件,我们可以更好地组织和管理组件的相关资源,并方便地重用和维护组件。

组件注册

在 Vue 中,如果要使用自定义组件,第一步需要做的就是将其注册到应用中。Vue 组件的注册可以有两种方式:全局注册和局部注册。

  1. 全局注册:全局注册的组件可以在整个应用的任何地方使用,无需额外的导入或注册操作。

    全局注册组件的方法是在 main.ts 文件中使用 app.component 方法。例如,将自定义组件 my-component 进行全局注册:

    import { createApp } from 'vue';
    import App from './App.vue';
    import MyComponent from './components/MyComponent.vue';
    
    const app = createApp(App);
    
    app.component('my-component', MyComponent);
    
    app.mount('#app');
    

    在上述示例中,我们首先使用 createApp 创建应用实例,并将根组件 App 作为参数传入。然后,使用 app.component 方法全局注册名为 my-component 的组件,并将其与 MyComponent 组件关联。最后,通过 app.mount 将应用挂载到页面中的 DOM 元素上。

    在全局注册后,我们可以在任何组件的模板中使用 <my-component></my-component> 标签来引入和使用该组件,无需在局部组件中重新注册。

  2. 局部注册:局部注册的组件只能在其所属的组件内部使用,无法在其他组件(包括子组件)中直接使用。

    在组合式 API 中组件局部注册时直接引入,然后直接调用即可。例如:

    <script setup>
    import MyComponent from './MyComponent.vue';
      
    </script>
    
    <template>
        <!-- 使用局部注册的子组件 -->
        <my-component></my-component>
    </template>
    

    在上述代码中,<script setup> 部分引入了 MyComponent 组件,并且不需要使用 app.component 进行额外的局部注册。直接在模板中使用 <my-component></my-component> 即可使用这个局部注册的组件。

通过全局或局部注册组件,我们可以在应用中灵活地使用和组织组件,实现不同层次的封装和复用。

组件通信

在 Vue 中,组件之间的通信,大致可以分为以下四种情况:父组件向子组件通信、子组件向父组件通信、父组件向隔代子组件通信和非父子组件之间的通信。如图:

深入了解 Vue 3 组件间通信机制,Vue3,vue.js,前端,javascript

四种通信模式涵盖了 Vue 中组件和组件通信的所有情况,解决方法如下:

  • 父组件向子组件传递数据:使用组件的 props 实现。
  • 子组件向父组件传递数据:通过自定义事件实现。
  • 父组件向隔代子组件传递数据:使用订阅发布实现,使用 provide/inject 在父组件提供数据,在后代组件中注入数据。
  • 非父子组件之间传递数据:使用第三方状态管理实现,如 Pinia。

根据不同的场景和需求,选择适合的通信方式来进行组件之间的通信。

使用 Props 通信

Props 关键字代表开发者在组件上注册的一些自定义属性,然后父组件通过子组件的 Props 属性将数据直接传递到子组件内部,供子组件调用处理。

需要注意的是,Props 传递的数据全部为单向流数据,即只能从父组件向子组件传递,不能子组件向父组件传递。所以,在使用 Props 进行组件之间通信时,需要首先在子组件内定义 Props,然后在父组件内调用,代码如下:

//子组件 ChildComponent.vue
<template>
  <p>{{ message }}</p>
</template>

<script setup lang="ts">
  defineProps<{
    message?:string
  }>()
</script>

在子组件中,使用 defineProps() 方法定义了一个名为 message 的 prop,类型为字符串。通过在模板中使用双花括号语法 {{ message }},可以显示接收到的来自父组件的数据。

//父组件 Parent.vue
<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'

const parentMessage=ref<string>("Hello from parent component!")
</script>

<template>
<child-component :message="parentMessage"></child-component>
</template>

在父组件中,定义了一个名为 parentMessage 的数据属性,并将其绑定到子组件的 prop 上。通过在子组件标签上使用冒号语法 :message="parentMessage",将父组件的 parentMessage 数据传递给子组件的 message prop。

使用以上代码,父组件就能够通过 props 向子组件传递数据了。在子组件中,可以直接使用该数据进行展示或进一步处理。这种父组件向子组件传递数据的方式非常常见,并且在 Vue 组件开发中被广泛使用。

另外,如果想给 Props 定义的属性一个初始值,可以使用 withDefaults() 方法,代码如下:

<script setup lang="ts">
  withDefaults(defineProps<{message?:string}>(),{
    message:'这是默认值'
  })
</script>

withDefaults() 方法接收的第一个参数是 Props 定义,第二个参数则是这些 Props 定义的属性的默认值。并且这里在定义 Props 的时候,采用 TypeScript 的可选属性定义组件属性,即再属性名称后面添加问号,代表当前 Props 属性为非必传属性,子组件使用默认值来进行渲染。

使用自定义事件通信

在 Vue 3 的组合式 API 中,组件的自定义事件是通过 defineEmits() 方法定义。然后在需要被调用的地方发射自定义事件给父组件,同时,父组件通过 v-on 指令将本身的处理函数与子组件发射的自定义事件相绑定,从而实现子组件向父组件通信的过程。

下面是一个示例代码:

//子组件 ChildComponent.vue
<template>
<button @click="emit('btnClick', message)">传递</button>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const message = ref<string>("子组件消息")
  const emit = defineEmits<{
    (eventName: 'btnClick', message: string): void
  }>()
</script>

上述代码中,我们在 <script setup> 中,使用 defineEmits 来定义了一个 btnClick 的自定义事件。然后,我们将 sendMessage 方法进行了修改,使其调用 emit 方法并传递了 btnClick 事件名称和 message 变量的值。

这样,当子组件的按钮被点击时,就会触发 btnClick 事件,并将 message 的值传递给父组件。父组件可以监听该事件并进行相应的处理。

//父组件 Parent.vue
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const message = ref<string>("父组件消息")
const handle = (msg:string):void=>{
    message.value=msg
}  
</script>

<template>
    <p>消息: {{ message }}</p>
    <child-component @btn-click="handle"></child-component>
</template>

在父组件中,我们使用 @btn-click 监听子组件触发的 btn-click 自定义事件,并将 handle 方法指定为事件处理函数。

当子组件中的按钮被点击时,会触发 btn-click 事件并将消息作为参数传递给父组件的 handle 方法。在 handle 方法中,我们将接收到的消息更新到 message 变量上,从而实现父组件接收子组件发送的消息并进行处理的效果。

使用订阅发布通信

Props 属性负责父组件向子组件传递数据,子组件可以通过自定义事件向父组件传递数据。但是如果两个组件不是父子组件关系,而是深度嵌套的组件,并且深层子组件只需要父组件的部分内容,这个时侯如果使用 Props 属性逐级传下去,将会显得非常麻烦而且容易出错。针对这种情况,Vue 推出了发布订阅进行通信,即 Provider/Inject 通信。

Provider/Inject 通信,需要有一个 Provider 和一个或者多个 Inject。在父组件中,Provider 负责提供数据,深层子组件里的 Inject 负责读取数据。这种通信方式,不管父子组件中间相隔多久,都是可以实现的。

例如这里的组件层级关系如下:

ProjectInjectComponent
 ﹂ProjectInjectChild
  ﹂ProjectInjectGrandson

在 ProjectlnjectComponent 中使用 Provide 先发布一条数据, 然后在孙组件 ProjectInjectGrandson 中通过 Inject 订阅这条数据并显示。代码如下:

//ProjectInjectComponent.vue(父组件)
<script lang="ts" setup>
import { provide, ref } from 'vue';
import ProjectInjectChild from './ProjectInjectChild.vue';

const message = ref<string>("ProjectInjectComponent 组件消息")

//发布数据,key:message
provide('message',message);
</script>

<template>
    <ProjectInjectChild></ProjectInjectChild>
</template>
//ProjectInjectChild.vue(子组件)
<script lang="ts" setup>
import ProjectInjectGrandson from './ProjectInjectGrandson.vue';

</script>

<template>
    <ProjectInjectGrandson></ProjectInjectGrandson>
</template>
//ProjectInjectGrandson.vue(孙组件)
<script lang="ts" setup>
import { inject, ref } from 'vue';

//订阅数据 key:message,defaultValue:"消息"
const message = inject<string>('message',"消息")
</script>

<template>
    <h2>{{ message }}</h2>
</template>

在 ProjectInjectComponent 组件中通过 Provide 发布了一个名为 message 数据;在嵌套最底层的 ProvideInjectGrandson 组件中通过 Inject 读取父组件发布的 message 数据,并渲染在页面上。因为父组件中的 message 是响应式数据,所以父组件中的数据会同步更新到嵌套的子组件中,最终将更新后的数据重新渲染到页面。文章来源地址https://www.toymoban.com/news/detail-646953.html

到了这里,关于深入了解 Vue 3 组件间通信机制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3组件通信详解

    vue3组件通信方式有以下几种:porps,$emit, bus,v-model, useAttrs ,$ref/$parent,provide/inject,pinia,slot。下面将逐一讲解。    目录 1.porps:实现父子组件通信,子组件接收的数据还是只读  2.$emit 3.全局事件总线 $bus,使用mitt 4.v-model传值 5. $attrs/useAttrs:获取组件标签身上属性与

    2024年02月07日
    浏览(37)
  • vue3-父子组件间通信

    在实际业务开发的过程中,我们时常会遇到组件间的通信问题,比如:父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式: 方案 父组件向子组件 子组件向父组件 props/emits props emits v-model/emits v-model emits ref/emits

    2024年02月05日
    浏览(61)
  • vue3组件通信学习笔记

    父组件 子组件 父组件 子组件 子组件1 子组件2 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 孙子组件 1、选择式写法 1、info.js 2、在组件1中使用 3、在组件2中使用 2、组合式API写法 1、在modules文件夹下新建todo.js 2、在组件1中使用 3、在组件2中使

    2024年02月09日
    浏览(43)
  • Vue3 组件之间的通信

    经过前面几章的阅读,相信开发者已经可以搭建一个基础的 Vue 3 项目了! 但实际业务开发过程中,还会遇到一些组件之间的通信问题,父子组件通信、兄弟组件通信、爷孙组件通信,还有一些全局通信的场景。 这一章就按使用场景来划分对应的章节吧,在什么场景下遇到问

    2023年04月08日
    浏览(43)
  • Vue3组件通信相关内容整理

    适用于:  父向子传递参数、方法, 子触发父传递的方法 props方式组件通信和vue2中的props传参类似,只是使用方式和接收方式有一些区别。 注意点: 通过props方式传递的参数为 只读属性,不可修改 父组件 子组件  组件A :绑定事件-接收数据  组件B:触发事件-传递数据 这

    2024年01月25日
    浏览(41)
  • vue3组件通信之pinia

      在vue3,vue的状态管理也迎来了新的变更,在vue3使用新的组件pinia来代理原有的vuex。pinia相比vuex,功能收敛了不少,比如不直接暴露setter方式,外部直接修改数据 vuex:集中式管理状态容器,可以实现任意组件之间通信 核心概念:state、mutations、actions、getters、modules pinia:集中式

    2024年02月11日
    浏览(40)
  • vue3 快速入门系列 —— 组件通信

    组件通信在开发中非常重要,通信就是你给我一点东西,我给你一点东西。 本篇将分析 vue3 中组件间的通信方式。 Tip :下文提到的绝大多数通信方式在 vue2 中都有,但是在写法上有一些差异。 在 vue3 基础上进行。 新建三个组件:爷爷、父亲、孩子A、孩子B,在主页 Home.vu

    2024年04月17日
    浏览(63)
  • 【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下: props数据只读,从父组件传递到子组件,子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种:原生的DOM事件和自定

    2024年02月13日
    浏览(48)
  • vue3-深入组件-组件注册和props更多细节

    定义好的组件需要注册才能被使用。 注册方式有两种 全局注册 局部注册 全局注册 .component() 方法,让组件在当前 Vue 应用中全局可用。 在 main.ts 中 在 vue 中直接使用无需导入 效果: 全局注册的组件可以在此应用的任意组件的模板中使用,所有的子组件也可以使用全局注册

    2024年01月25日
    浏览(50)
  • Vue3组件间的通信方式

    目录  1.props父向子组件通信 2.自定义事件 子向父组件通信 3.全局事件总线 4.v-model组件通信(父子组件数据同步) 绑定单个数据同步  绑定多个数据同步  5.useAttrs组件通信  6.ref与$parent ref获取子组件实例对象  $parent获取父组件实例对象  7.provide-inject 可以实现隔辈传输 8.

    2024年02月17日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包