Vue ----- provide / inject

深碍√TFBOYSˉ_ 2023-06-16 08:17 9阅读 0赞

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>slot</title>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    
    <body>
      <div id='root'>
        <parent>
          <children1>
            <children2></children2>
          </children1>
        </parent>
      </div>
    </body>
    
    <script>
      Vue.component('parent', { 
        template: `<div> <slot></slot> </div>`,
        provide: { 
          foo: 'bar'
        }
      })
      Vue.component('children1', { 
        template: `<span>{ {foo}} <slot></slot> </span>`,
        inject: ['foo']
      })
      Vue.component('children2', { 
        template: `<h1>{ {foo}}</h1>`,
        inject: ['foo']
      })
      var vm = new Vue({ 
        el: '#root',
      })
    
    </script>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue ----- provide / inject

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

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

相关 Vue provide/inject使用

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

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

相关 provide/inject

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

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

相关 vue中的provide和inject

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

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

相关 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 组件通讯

当孙子组件需要访问父组件的数据，又不适用 vuex，和第三组件进行通讯时，可以使用 provide / inject，我们只需要在上一层级的声明的provide，那么下一层级无

谁借莪１个温暖的怀抱￠/ 2022年09月01日 13:57/ 0 赞/ 187 阅读

相关 vue学习- provide / inject

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

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

相关 vue provide和inject

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

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

相关 vue3.0 provide和inject

两者都只能在当前活动组件实例的setup()中调用。生产者消费者使用 import {provide,inject} from

曾经终败给现在/ 2021年07月24日 21:16/ 0 赞/ 517 阅读

相关 vue3.0 provide/inject

1、上级组件导入 import { provide } from 'vue'; setup(){ provide('k

左手的ㄟ右手/ 2021年07月24日 16:20/ 0 赞/ 368 阅读