provide / inject 的简单使用

Love The Way You Lie 2021-08-31 08:29 653阅读 0赞

## provide / inject ##

## 祖先组件向其所有后代组件注入依赖 ##

1.  组件

<template>
      <div>
        oindex
        <oIndex2></oIndex2>
      </div>
    </template>
    
    <script>
    import oIndex2 from "./oIndex2";
    export default {
      components: {
        oIndex2
      },
      provide() {
        return {
          list: this.list
        };
      },
      data() {
        return {
          list: [{ id: 1, name: "刘德华" }]
        };
      }
    };
    </script>
    
    <style>
    </style>

1.  子组件

<template>
      <div>
        oIndex2
        <oIndex3></oIndex3>
      </div>
    </template>
    
    <script>
    import oIndex3 from "./oIndex3";
    export default {
      components: {
        oIndex3
      }
    };
    </script>
    
    <style>
    </style>

1.  孙组件

<template>
      <div>oIndex3</div>
    </template>
    
    <script>
    export default {
      inject: ["list"],
      mounted() {
        console.log("tag", this.list);
      }
    };
    </script>
    
    <style>
    </style>

总结:达到数据的简单穿透效果

发表评论取消回复

表情：

评论列表（有 0 条评论，653人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue--provide, inject--使用/教程/实例

原文网址：[Vue--provide, inject--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--provide_ inject--_IT_-CSDN]

桃扇骨/ 2023年10月02日 17:39/ 0 赞/ 12 阅读

相关刷新页面：provide和inject的使用

provider/inject依赖注入：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。这里不论子组件有多深，只要调用了inject那么

刺骨的言语ヽ痛彻心扉/ 2023年07月10日 14:20/ 0 赞/ 65 阅读

相关 Vue ----- provide / inject

provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效 eg:

深碍√TFBOYSˉ_/ 2023年06月16日 08:17/ 0 赞/ 11 阅读

相关 Vue中使用provide和inject

![format_png][] 相信大家在工作中一定遇到过多层嵌套组件，而vue 的组件数据通信方式又有很多种。比如vuex、与children、prop、与on、

╰半橙微兮°/ 2023年02月13日 08:17/ 0 赞/ 12 阅读

相关 Vue provide/inject使用

[https://www.jianshu.com/p/e574b832fdbc][https_www.jianshu.com_p_e574b832fdbc] [https_

秒速五厘米/ 2022年12月22日 11:23/ 0 赞/ 225 阅读

相关 provide和inject

父组件 <script> import helloworld from "../components/HelloWorld"; provide(

阳光穿透心脏的1/2处/ 2022年12月15日 03:36/ 0 赞/ 181 阅读

相关 provide/inject

概述 `provide/inject`：简单的来说就是在父组件中通过`provide`来提供变量，然后在子组件中通过`inject`来注入变量。需要注意的是这里不论子

桃扇骨/ 2022年12月12日 13:49/ 0 赞/ 196 阅读

相关 vue-provide/inject

vue-provide/inject的用法可以优化vue的项目在传入数据的地方 <script> export default {

Love The Way You Lie/ 2022年10月16日 03:00/ 0 赞/ 152 阅读

相关 vue学习- provide / inject

1、解释 provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

深藏阁楼爱情的钟/ 2022年02月24日 17:36/ 0 赞/ 191 阅读

相关 provide / inject 的简单使用

provide / inject 祖先组件向其所有后代组件注入依赖 1. 组件 <template> <div> oinde

Love The Way You Lie/ 2021年08月31日 08:29/ 0 赞/ 654 阅读