1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      vue中的inject学习教程

       更新时间2019年04月24日 11:59:56   作者无雪冬天   我要评论

      本文通过实例代码给大家介绍了vue中的inject学习教程非常不错具有一定的参考借鉴价值需要的朋友参考下吧

      最近看源码有一段对于整合参数的代码

      normalizeProps(child, vm)
       normalizeInject(child, vm)
       normalizeDirectives(child)

      想象里边的Inject很少用到所以查了一下资料

      通常组件传参是有两种情况

      1. 父子组件进行传参这时候通常利用props
      2. 非父子组件传参这时候一般利用vuex

      会有一种情况隔代组件传参,这时候可以利用props一层一层传递下去但是代码就比?#19979;?#20102;

      所以就有了 provide/inject 进行隔代组件传递

      父组件

      <template>
        <div class="test">
          <son></son>
        </div>
      </template>
      <script>
      export default {
        name: 'Test',
        provide: {
          name: 'Garrett'
        }
      }
      </script>

      子组件

      <template>
        <div>
          {{name}}
        </div>
      </template>
       
      <script>
      export default {
        name: 'Garrettson',
        inject: [name]
      }
      </script>

      对于使用场景基础组件应该使用props我个人觉得一般用于比较复杂业务提供基础数据比如最近的基金详情页可以直接在最顶层提供基金的基本信息然后子组件都可以访问的到不用每个单独提供detail的props 属性

      PSvue学习- provide / inject

      1解释

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

      provide 选项应该是一个对象或返回一个对象的函数
      inject 选项应该是一个字符串数组或 一个对象对象的 key 是本地的绑定名

      2示例

      父组件中提供

       provide() {
        return {
         map_nodeObj: { map_node: this.obj }
         // 提示provide 和 inject 绑定并不是可响应的这是刻意为之的然而如果你传入了一个可监听的对象那么其对象的属性还是可响应的
        }
       },

      子组件中引入

       inject: {
        map_nodeObj: {
         default: () => {
          return {map_node: '0'}
         }
        }
       },

      使用 this.map_nodeObj.map_node

      3运行顺序

      data
      provide
      created // 在这个阶段$el还未生成在这先处理privide的逻辑子孙组件才可以取到inject的值
      mounted
      ...

      总结

      以上所述是小编给大家介绍的vue中的inject学习教程,希望对大家有所帮助如果大家有任?#25105;?#38382;请给我留言小编会及时回复大家的在此也非常?#34892;?#22823;家对脚本之家网站的支持
      如果你觉得本文对你有帮助欢迎转载烦请注明出处谢谢

      相关文章

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>