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属性来获取数据。




    世界上没有什么偶然,有的只有必然。——壹原侑子
  • 相关阅读:
    ASP.NET MVC自定义Module记录管道事件执行顺序
    Pro ASP.NET MVC 5 Platform-第三章 ASP.NET 生命周期
    C#基础-反射
    C#7语法快速参考-第一章 Hello World
    两张趣图助你理解 HTTP 状态码!
    dev listbox使用
    aspose导出数据
    dev chart使用
    linq多个条件
    json返回数据多个是数组,单个就不是处理方案
  • 原文地址:https://www.cnblogs.com/liazhimao/p/14821931.html
Copyright © 2011-2022 走看看