zoukankan      html  css  js  c++  java
  • vue中的provide/inject讲解

    最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject

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

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

    下面我们来验证下猜想:

    • first:定义一个parent component
    <template>
      <div>
    <childOne></childOne>
      </div>
    </template>
    
    <script>
      import childOne from '../components/test/ChildOne'
      export default {
        name: "Parent",
        provide: {
          for: "demo"
        },
        components:{
          childOne
        }
      }

    在这里我们在父组件中provide for这个变量。

    • second 定义一个子组件
    <template>
      <div>
        {{demo}}
        <childtwo></childtwo>
      </div>
    </template>
    
    <script>
      import childtwo from './ChildTwo'
      export default {
        name: "childOne",
        inject: ['for'],
        data() {
          return {
            demo: this.for
          }
        },
        components: {
          childtwo
        }
      }
    </script>
    • third 定义另一个子组件
    <template>
      <div>
        {{demo}}
      </div>
    </template>
    
    <script>
      export default {
        name: "",
        inject: ['for'],
        data() {
          return {
            demo: this.for
          }
        }
      }
    </script>

    在2个子组件中我们使用jnject注入了provide提供的变量for,并将它提供给了data属性。

    这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

    运行之后看下结果

    clipboard.png

    从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。
  • 相关阅读:
    连载:面向对象葵花宝典:思想、技巧与实践(2)
    关于虚拟化一些思考——不应该盲目使用
    Zimbra8.x邮件服务器安装及配置
    CodeForces 371D. Vessels
    【建模】UML类关系分析
    公式提取软件mathpix
    ROS多线程编程
    ROS节点的初始化及退出详解(ros::init、SIGINT、ros::ok、ros::NodeHandle
    ROS 日志消息(C++)
    Python 中的 if __name__ == '__main__' 该如何理解
  • 原文地址:https://www.cnblogs.com/zjw2004112/p/11727305.html
Copyright © 2011-2022 走看看