zoukankan      html  css  js  c++  java
  • Vue中provide/inject

    特点

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

    格式

    provide 选项应该是:

    一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

    inject 选项应该是:

    一个字符串数组或 一个对象,对象的 key 是本地的绑定名(自定义的一个名字),value 是:在provide传过来的值(字符串或 Symbol),或一个对象,该对象的:from 属性是provide传过来的 (字符串或 Symbol),default 属性是降级情况下使用的 value

    简单来说是:父级:provide:{parentValue:' '},孙级:inject:['parentValue']

    示例:

    父级

    <template>
      <div>
        <h1>HelloWorld</h1>
        <One></One>
      </div>
    </template>
    
    <script>
    import One from "./One";
    export default {
      components: { One },
     
      provide() {
        return {
            qinqin:this
            value:this.value
        };
      }
    };
    </script>

    子级

    // 子组件
        const ChildComponent={
          name:'comp',
          components:{
            SunChildComponent
          },
        }
        template:`
          <div :style="style">
          <slot :value="value" :qin="qin"></slot>
          <sun-child-component></sun-child-component>
          </div>
        `,
        data(){
          return{
            value:'component val',
            qin:'component qin'
          }
        }

    孙级

    // 孙组件
         const SunchildComponent={
           template:'<div>child component</div>',
          //  跨级使用了父组件的数据
          inject:['qinqin'],
          mounted(){
            console.log(this.qinqin)
          }
         } 

    理解

    provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量

    需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。




    世界上没有什么偶然,有的只有必然。——壹原侑子
  • 相关阅读:
    把EXE可执行文件等作为资源包含在Delphi编译文件中
    delphi怎么做桌面滚动文字?
    cxGrid控件过滤筛选后如何获更新筛选后的数据集
    我的ecshop二次开发经验分享
    ECSHOP 数据库结构说明 (适用版本v2.7.3)
    cxGrid 怎样才能让不自动换行 WordWrap:=false
    vi notes
    ODI中显示us7ascii字符集的测试
    ODI 11g & 12c中缓慢变化维(SCD)的处理机制
    ODI中的临时接口
  • 原文地址:https://www.cnblogs.com/liazhimao/p/14821931.html
Copyright © 2011-2022 走看看