zoukankan      html  css  js  c++  java
  • 介绍Provide以及Inject

    介绍 Vue 的 Provide 以及 Inject

    Provide 以及 Inject 是 Vue 中用于祖先元素向其所有后台元素注入依赖的接口。

    具体用法

    
    // Data.vue
    ...
    export default {
      provide: {
        setData: 'setData'
      },
      methods: {
        setdata() {
          //Something
        }
      }
    };
    
    
    // DataItem.vue
    ...
    export default {
      inject: ['setData'],
      created() {
        this.setdata();
      }
    };
    
      <data>
        <data-item></data-item>
      </data>
    </template>
    
    • 注意:通过 Inject 获得的属性是不可响应的。

    项目中实际应用

    在项目中,如需要两个基础组件的父子组件进行通信,又不想写太多业务无关代码,就可以使用 Provide 以及 Inject。

    例如:

    ```<app> <app-header></app-header> <!-- 在App中开启header的显示 --> <app-navigation></app-navigation> <!-- 在App中开启navigation的显示 --> ... <app-footer></app-footer><!-- 在App中开启footer的显示 --> </app> ```

    仅需要简单的调用组件,而不需要传递 Prop 的值以及定义 Slot。

    当然也可以使用一个全局对象实现,使用 Provide 以及 Inject 好处是可多页面复用以及较为简单。

    如果需求比较复杂,还是使用一个全局的 Vue 对象或 Vuex 更好。

    来源:https://segmentfault.com/a/1190000016874566

  • 相关阅读:
    Gradle 是什么
    Spring AOP知识
    Spring IOC常用注解
    spring 依赖注入
    Java实现基数排序
    Java实现基数排序(解决负数也可以排序)
    2020/4/10安卓开发:Spinner下拉框
    Spring ioc使用
    java实现:归并排序
    centos中docker的安装
  • 原文地址:https://www.cnblogs.com/lovellll/p/10126114.html
Copyright © 2011-2022 走看看