vueprovide和inject用法

更新时间:2023-07-26 12:37:41 阅读: 评论:0

vueprovide和inject用法
    在 Vue.js 中,组件之间交互是非常常见的需求。父组件向子组件传递数据可以通过 props 以及 $emit 实现。但是如果父组件需要向多个嵌套层次比较深的子组件传递数据,那么这种方式就显得比较繁琐了。这时候就可以使用 provide 和 inject 配合使用来完成数据传递。
    provide 和 inject 是 Vue.js 2.2.0 版本新增的一种组件通信方式,旨在解决 props 属性逐级传递的繁琐性,使得父组件可以在其作用域内向子孙后代组件传递数据,而无需逐层递归传输。
    provide 和 inject 均是组件实例的选项(options),分别用于提供属性和注入属性。在组件的 provide 中,我们可以提供数据,这些数据可以被 inject 后代组件调用。
    provide 是父组件给孙组件使用的,inject 是孙子组件注入到孙子组件里面的,也就是在孙子组件里使用父组件提供的。
    我们先来看看 provide 和 inject 的代码示例,以方便大家理解它的用法。
    父组件 Header.vue
做人不能太cnn
    ```
    <template>
      <div>
        <h1>{{ title }}</h1>
        <child-component></child-component>
      </div>
    </template>
    <script>
    import ChildComponent from './ChildComponent'
    export default {
      components: {
        ChildComponent
remix什么意思      },
      provide () {
        return {
          title: this.title
        }
      },
      data () {
        return {
          title: 'Welcome to u Vue provide and inject!'
        }
      }
nai
    }whenwewereyoung>cnn听力下载
    </script>
clamps
    ```
    子组件 ChildComponent.vue
    <script>
    export default {
      inject: ['title']
    }
    </script>
    ```
    从上面的代码示例中,我们可以看到 Header 组件提供了一个叫做 title 的数据项,供 ChildComponent 组件和 GrandchildComponent 组件所使用。其中,ChildComponent 组件注入了 title 数据项,GrandchildComponent 组件也注入了 title 数据项。因此,GrandchildComponent 组件中就可以直接使用 title 数据。
    - 父组件提供数据,设置 `provide` 属性
    提供的数据是一个对象或一个函数。当 provide 是一个对象时,其属性值可以是基础类型数据或对象;当 provide 是一个函数时,函数体内可以通过 this 访问到当前实例,返回一个对象或基础类型数据即可。
读mba有用吗    ```
    provide: {
足球 电影
      name: 'TomKit'
    }
    ```
    - 在子孙组件中使用提供的数据,通过 `inject` 将其“注入”
什么是不及物动词    注入可以接受一个数组,数组中以字符串形式列出了要注入的属性名。
    最好写成一个对象,对象的 key 是我们要用到的名称,value 是我们注入进来的属性名称。这里的 name 代表的是父组件提供的 name 属性。
    需要注意的是父组件提供的数据是只读的,不论是基本类型还是引用类型,都无法影响到 provider 实例中的数据。
    如果要让应用程序从头到尾使用相同的一些数据,那么我们可以使用 provide/inject 来提供数据,而不是在每个组件中使用 props。
    比如:
    - 文字大小:用户可以在页面上选择文字大小,然而我们不希望每个组件都手动实现这个逻辑,而是希望某个组件就能够负责提供适当的 class。
    - 主题样式:用户可以在页面上选择暗黑模式或白天模式,如果我们使用 props 方法来传递这个状态到每个组件中,显然是不划算的,相反,我们可以只使用一个组件,它是唯一的,并且使用相同的数据源,由应用程序提供。
    - 日志记录器:我们可能希望所有的组件都能够使用同一个日志记录器,这样我们就不必过多关注每个组件实例是否有其自己的日志记录器。
    五、总结
    Vue.js 的 provide 和 inject 具有提供数据的组件和注入数据的子孙组件之间解耦的作用。通过这种方式,我们可以将数据直接传输到终端组件,而无需在其中逐级地传递 props 属性。在实践中,我们可以使用这种方式来实现类似主题样式、文字大小、日志记录器等共享数据的场景,以减少代码复杂度和提高程序的可维护性。

本文发布于:2023-07-26 12:37:41,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/1118180.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:组件   数据   使用   注入   提供   属性   对象   类型
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图