provide / inject 的简单使用

Love The Way You Lie 2021-08-31 08:29 611阅读 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 条评论，611人围观）

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

相关阅读

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

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

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

相关 Vue provide/inject使用

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

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

相关 provide和inject

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

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

相关 provide/inject

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

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

相关 vue中的provide和inject

一、名词解析： `provide：Object | () => Object` `inject：Array<string> | { [key: string]: st

雨点打透心脏的1/2处/ 2022年12月08日 05:17/ 0 赞/ 152 阅读

相关 vue-provide/inject

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

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

相关 vue3.0 inject 和 provide 使用

组合式提供与注入：[Vue 3 组合式 provide/inject - 知乎][Vue 3 _ provide_inject -] 在之前的章节，我们讲了选项式的提

迷南。/ 2022年09月17日 06:17/ 0 赞/ 167 阅读

相关 vue学习- provide / inject

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

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

相关 provide / inject 的简单使用

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

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

相关 vue provide和inject

1、provide export default{ provide:{ key:value }, provi

ゞ浴缸里的玫瑰/ 2021年07月25日 02:42/ 0 赞/ 431 阅读