Vue ----- provide / inject

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>slot</title>
  9.   <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  10. </head>
  12. <body>
  13.   <div id='root'>
  14.     <parent>
  15.       <children1>
  16.         <children2></children2>
  17.       </children1>
  18.     </parent>
  19.   </div>
  20. </body>
  22. <script>
  23.   Vue.component('parent', { 
  24.     template: `<div> <slot></slot> </div>`,
  25.     provide: { 
  26.       foo: 'bar'
  27.     }
  28.   })
  29.   Vue.component('children1', { 
  30.     template: `<span>{ {foo}} <slot></slot> </span>`,
  31.     inject: ['foo']
  32.   })
  33.   Vue.component('children2', { 
  34.     template: `<h1>{ {foo}}</h1>`,
  35.     inject: ['foo']
  36.   })
  37.   var vm = new Vue({ 
  38.     el: '#root',
  39.   })
  41. </script>
  43. </html>

发表评论

表情：
评论列表 （有 0 条评论，127人围观）

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

相关阅读

    相关 provide/inject

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

    桃扇骨桃扇骨/ 0 赞/ 296 阅读