vue中组合式 API-依赖注入之provide和inject的用法（一）——功能-把一个祖先组件指定的数据和方法，传递给其所有子孙后代 & provide-提供或发送数据， inject-接收数据

vue中组合式 API-依赖注入之provide和inject的用法（一）——功能-把一个祖先组件指定的数据和方法，传递给其所有子孙后代 & provide-提供或发送数据， inject-接收数据

1、前言

在父子组件传递数据时，通常使用的是 props 和 emit。父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。

provide与inject的功能

通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙后代

provide 和 inject 主要在开发高阶插件/组件库时使用

2、vue2 中provide / inject的使用

provide：是一个对象，里面是属性和值。

provide:{ 
    info:“值” } 

如果 provide 需要使用 data 内的数据，访问组件实例 property 时，需要将 provide 转换为返回对象的函数。

provide(){ 
    return{ 
    info: this.msg } } 

在 vue2 中 project / inject 应用

//父组件 export default{ 
    provide:{ 
    info:"提供数据" } } //子组件 export default{ 
    inject:['info'], mounted(){ 
    console.log("接收数据：", this.info) // 接收数据：提供数据 } } 

• provide 提供或发送数据， inject 接收数据。

3、vue3中的provide / inject的使用

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide( name,value )，provide 函数接收两个参数：

• name：定义提供 property 的 name 。
• value ：property 的值。

使用时：

import { 
    provide } from "vue" export default { 
    setup(){ 
    provide('info',"值") } } 

inject(name,default)，inject 函数有两个参数：

• name：接收 provide 提供的属性名。
• default：设置默认值，可以不写，是可选参数。

使用时：

import { 
    inject } from "vue" export default { 
    setup(){ 
    inject('info',"设置默认值") } } 

provide/inject实例

//父组件代码 <script> import { 
    provide } from "vue" export default { 
    setup(){ 
    provide('info',"值") } } </script> //子组件 代码 <template> { 
   { 
   info}} </template> <script> import { 
    inject } from "vue" export default { 
    setup(){ 
    const info = inject('info') return{ 
    info } } } </script> 

4、使用示例

3个组件 A(父级)、B(子级)、C(孙子级)

父组件A ---- 通过provide指定传递给子孙组件的值

export default { 
    provide() { 
    // provide是一个匿名函数，返回一个对象 return { 
    reload: this.reload， msg:this.msg }; }, data(){ 
    return { 
    msg:'hello world!' } }, methods: { 
    reload() { 
    console.log("C调用A的方法！"); }, }, }, 

子/孙组件 ---- 通过inject 获取祖先组件传递过来的值

export default { 
    //inject: ["reload","msg"], 简写 inject:{ 
    // 详细指定来源以及默认值 msg:{ 
    from:'A', //表示从组件A传递过来的 default:'a default msg' }, reload:{ 
    from:'A' } }, mounted() { 
    this.reload(); }, }, 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10700.html