<Vue>使用依赖注入的方式共享数据

这篇具有很好参考价值的文章主要介绍了<Vue>使用依赖注入的方式共享数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是vue依赖注入?

Vue是一个用于构建用户界面的渐进式框架。

它提供了一种简单而灵活的方式来管理组件之间的数据流,即依赖注入(Dependency Injection,DI)。

依赖注入是一种设计模式,它允许一个组件从另一个组件获取它所依赖的数据或服务,而不需要自己创建或管理它们。这样可以降低组件之间的耦合度,提高代码的可维护性和可测试性。

依赖注入示意图

<Vue>使用依赖注入的方式共享数据,前端架构之路,vue.js,javascript,前端,依赖注入,原力计划

provide和inject

在Vue中,依赖注入的方式是通过provide和inject两个选项来实现的。

provide选项允许一个祖先组件向下提供数据或服务给它的所有后代组件。
inject选项允许一个后代组件接收来自祖先组件的数据或服务。
这两个选项都可以是一个对象或一个函数,对象的键是提供或接收的数据或服务的名称,值是对应的数据或服务。函数的返回值是一个对象,具有相同的格式。

下面是一个简单的例子,演示了如何使用依赖注入的方式共享数据:

父组件

<template>
  <div>
    <h1>我是祖先组件</h1>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'AncestorComponent',
  components: {
    ChildComponent
  },
  // 提供一个名为message的数据
  provide: {
    message: 'Hello from ancestor'
  }
}
</script>

子组件

<template>
  <div>
    <h2>我是后代组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

// 后代组件
<script>
export default {
  name: 'ChildComponent',
  // 接收一个名为message的数据
  inject: ['message']
}
</script>

这样,后代组件就可以直接使用祖先组件提供的数据,而不需要通过props或事件来传递。

需要注意的是,依赖注入的数据是不可响应的,也就是说,如果祖先组件修改了提供的数据,后代组件不会自动更新。
如果需要实现响应性,可以使用一个响应式的对象或者一个返回响应式对象的函数作为provide的值。

实现响应式依赖注入的几种方式

<Vue>使用依赖注入的方式共享数据,前端架构之路,vue.js,javascript,前端,依赖注入,原力计划

一、提供响应式数据

方法是在提供者组件中使用ref或reactive创建响应式数据,然后通过provide提供给后代组件。后代组件通过inject接收后,就可以响应数据的变化。

提供者:

<template>
  <div>
    <h1>我是提供者组件</h1>
    <button @click="count++">增加计数</button>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide } from 'vue'

export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref创建一个响应式的计数器
    const count = ref(0)
    // 提供给后代组件
    provide('count', count)
    return {
      count
    }
  }
}
</script>

接收者:

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>计数器的值是:{{ count }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的响应式对象
    const count = inject('count')
    return {
      count
    }
  }
}
</script>

二、提供修改数据的方法

提供者组件可以提供修改数据的方法函数,接收者组件调用该方法来更改数据,而不是直接修改注入的数据。

提供者:

<template>
  <div>
    <h1>我是提供者组件</h1>
    <p>消息是:{{ message }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide } from 'vue'

export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref创建一个响应式的消息
    const message = ref('Hello')
    // 定义一个更改消息的方法
    function updateMessage() {
      message.value = 'Bye'
    }
    // 提供给后代组件
    provide('message', { message, updateMessage })
    return {
      message
    }
  }
}
</script>

接收者:

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>消息是:{{ message }}</p>
    <button @click="updateMessage">更改消息</button>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的响应式对象和方法
    const { message, updateMessage } = inject('message')
    return {
      message,
      updateMessage
    }
  }
}
</script>

三、使用readonly包装

通过readonly包装provide的数据,可以防止接收者组件修改数据,保证数据流的一致性。

提供者:

<template>
  <div>
    <h1>我是提供者组件</h1>
    <p>姓名是:{{ name }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide, readonly } from 'vue'

export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref创建一个响应式的姓名
    const name = ref('Alice')
    // 使用readonly包装提供的值,使其不可修改
    provide('name', readonly(name))
    return {
      name
    }
  }
}
</script>

接收者:

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>姓名是:{{ name }}</p>
    <button @click="name = 'Bob'">尝试修改姓名</button>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的只读对象
    const name = inject('name')
    return {
      name
    }
  }
}
</script>

四、使用<script setup>

<script setup>组合式写法下,provide和inject默认就是响应式的,无需额外处理。

总结

<Vue>使用依赖注入的方式共享数据,前端架构之路,vue.js,javascript,前端,依赖注入,原力计划

依赖注入的方式共享数据在Vue中是一种高级特性,它主要用于开发插件或库,或者处理一些特殊的场景。文章来源地址https://www.toymoban.com/news/detail-744972.html

到了这里,关于<Vue>使用依赖注入的方式共享数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Spring:依赖注入的方式(setter注入、构造器注入、自动装配、集合注入)

    依赖注入的方式有setter注入、构造器注入、自动装配、集合注入 首先,Maven项目pom.xml依赖包如下: pom.xml 【注】:上述除spring依赖包之外其他三个依赖包用于测试使用。 1. setter注入 先说明一下,这里有的文件为Book2Dao(接口)、Book2DaoImpl(Book2Dao接口实现类)、Book2Service(接口)、

    2024年02月02日
    浏览(46)
  • springboot依赖注入的三种方式

    springboot依赖注入的三种方式 在 Spring Boot 中,使用 XML 配置依赖注入(DI)时,需要使用 bean 元素来定义 bean,并使用 property 元素来为 bean 的属性注入值或依赖对象。 以下是一个简单的示例: 在 src/main/resources 目录下创建 applicationContext.xml 文件。 在该文件中定义一个 testBean

    2023年04月23日
    浏览(45)
  • javaee spring依赖注入之spel方式

    2024年02月11日
    浏览(40)
  • Springboot依赖注入Bean的三种方式,final+构造器注入Bean

    @Autowired注解的一大使用场景就是Field Injection。 通过Java的反射机制实现,所以private的成员也可以被注入具体的对象 优点 代码少,简洁明了。 新增依赖十分方便,不需要修改原有代码 缺点 容易出现空指针异常。Field 注入允许构建对象实例时依赖的对象为空,导致空指针异常

    2024年02月02日
    浏览(53)
  • Spring的依赖注入(DI)是什么,有哪些实现方式?

    在Spring中,依赖注入的实现方式主要有以下几种: 类型式依赖注入(Type Based Dependency Injection):这种注入方式是通过Java接口或抽象类来实现的。具体来说,就是将需要注入的依赖关系定义为接口或抽象类,然后通过注解或XML配置文件等方式来指定具体的实现类。在运行时,

    2024年02月09日
    浏览(36)
  • 【Vue3】依赖注入

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

    2024年02月13日
    浏览(38)
  • Springboot 入门指南:控制反转和依赖注入的含义和实现方式

    目录 一、什么是控制反转(IoC)? 二、什么是依赖注入(DI)? 三、如何在 springboot 中使用 IoC 和 DI? 总结 控制反转(Inversion of Control,简称 IoC)是一种设计原则,它的目的是降低代码之间的耦合度,提高模块化和可测试性。控制反转的含义是,将对象的创建、配置和管理

    2024年02月11日
    浏览(44)
  • spring(1):基于XML获取Bean对象以及各种依赖注入方式

    1.1 根据id获取 1.2 根据类型获取 1.3 根据id和类型获取 注意: 当根据类型获取bean时,要求IOC容器中指定类型的bean有且只能有一个。 例如以下XML文件,当IOC容器中一共配置了两个,根据类型获取时会抛出异常。 根据类型来获取bean时,在满足bean唯一性的前提下,其实只是看:

    2024年01月25日
    浏览(47)
  • Go新项目-Gin中wire的依赖注入方式实战(6)

    选型Go项目过程中,针对依赖注入方式的分析和使用 https://go.dev/blog/wire https://medium.com/@dche423/master-wire-cn-d57de86caa1b https://toutiao.io/posts/et0t2lk/preview https://imlht.com/archives/223/ https://lailin.xyz/post/go-training-week4-wire.html https://luenci.me/2022/01/08/%E8%81%8A%E8%81%8AWire%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%

    2024年01月18日
    浏览(50)
  • 基于Xml方式Bean的配置-Bean的依赖注入以及·自动装配

    Bean的依赖注入方式 注入方式 配置方式 通过Bean的set方法注入 通过构造Bean的方法进行注入 其中,ref是reference的缩写形式,翻译为:涉及,参考的意思,用于引用其它Bean的id,value用于指定属性值 注入数据类型 普通数据类型:String、int、boolean,通过value属性指定 引用数据类型

    2024年02月07日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包