vue3探索——组件通信之依赖注入

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

背景

通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:

vue3探索——组件通信之依赖注入

对于这种组件使用结构,vue3给我们提供了另外一种传参方式,那就是依赖注入。一个父组件相对于其所有的后代组件,会作为依赖提供者(provide)。任何后代的组件树,无论层级有多深,都可以注入(inject)由父组件提供给整条链路的依赖。

vue3探索——组件通信之依赖注入

基础使用

依赖提供者provide()

provide的使用非常简单,下面给出代码。

<script setup lang="ts">
// 1-引入
import { ref, provide } from 'vue';

const param = ref();

// 2-使用
provide('mark', param);
</script>

provide()函数需要传入两个参数:

  • 第一个参数被称为注入名,可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide(),使用不同的注入名,注入不同的依赖值。
  • 第二个参数是提供的值,值可以是任意类型,包括响应式的状态,比如一个 ref。提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。

💡 增强功能:除了在一个组件中提供依赖,我们还可以在整个应用层面提供依赖,类似于vue2中挂载在vue实例的原型对象上

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用,因为插件一般都不会使用组件形式来提供值。

注入inject()

要注入上层组件提供的数据,需使用 inject() 函数:

<script setup lang="ts">
// 1-引入
import { inject } from 'vue';

// 2-使用
const param = inject('mark');
// 第二个参数可以设置注入**默认值**,防止祖先组件没有提供依赖而造成报错
const param2 = inject('mark2', '默认值');
</script>

❗ 注意,不使用<script setup> 的话,需要在setup()函数中使用provide()inject()文章来源地址https://www.toymoban.com/news/detail-683188.html

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

实战

// src/App.vue
<template>
    <div class="dad">
        <!-- 1000元 -->
        <h1>我是父组件,我有{{ money }}元</h1>
        <!-- 使用子组件 -->
        <son />
    </div>
</template>

<script setup lang="ts">
// 引入子组件
import son from './components/son.vue';
// 引入vue API
import { ref, provide } from 'vue';

// 1-父组件响应式数据
const money = ref(1000);

// 向后面的组件提供依赖
provide('Pmoney', money);
</script>

<style lang="scss" scoped>
.dad {
    width: 600px;
    height: 600px;
    background-color: skyblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
// src/components/son.vue
<template>
    <div class="son">
        <h2>我是子组件</h2>
        <!-- 使用孙组件 -->
        <grandson />
    </div>
</template>

<script setup lang="ts">
// 引入孙组件
import grandson from './grandson.vue';
</script>

<style lang="scss" scoped>
.son {
    height: 400px;
    width: 400px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
// src/components/grandson.vue
<template>
    <div class="grandson">
        <h3>我是孙组件,我爷爷有{{ money }}元</h3>
    </div>
</template>

<script setup lang="ts">
// 引入 inject
import { inject } from 'vue';

// 2-注入祖先组件的依赖
const money = inject('Pmoney');
</script>

<style lang="scss" scoped>
.grandson {
    width: 200px;
    height: 200px;
    background-color: aqua;
}
</style>

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

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

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

相关文章

  • 【Vue3】依赖注入

    provide 和 inject 是 Vue.js 中用于实现依赖注入的两个关联功能。它们允许你在祖先组件中提供数据,然后在子孙组件中注入这些数据,实现组件之间的数据共享和传递。 provide:provide 是一个选项,你可以在父组件中通过它来提供数据。你可以在 provide 选项中声明要共享的数据。

    2024年02月13日
    浏览(37)
  • VUE3 组件通信

    用途:可以实现父子组件、子父组件、甚至兄弟组件通信 父组件 子组件 用途:可以实现子父组件通信 父组件 子组件 用途:可以实现任意组件通信 安装  配置 新建bus.js文件 使用 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 父组件 儿子组件1 儿子组件2 安装

    2024年03月19日
    浏览(43)
  • 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日
    浏览(36)
  • vue3.0组件通信

    没有加TS限制类型的时候 注意: defineProps()会返回一个对象,这个对象可以直接.出数据 加TS写法 规则: 非函数类型 基本数据类型 - 展示 引用数据类型 - 展示,但是可以修改属性,不推荐(违反单向数据流 - 不是绝对禁止使用的,偷懒可以用) 函数类型 - 子组件调用父组件传过来的函数

    2024年02月12日
    浏览(40)
  • 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日
    浏览(40)
  • vue3组件通信之pinia

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

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

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

    2024年04月17日
    浏览(62)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包