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

  • 相关阅读:
    主机访问虚拟机网络服务失败
    关于接收者为指针的方法
    slice的部分说明
    ES基础知识
    静态语言和动态语言
    数据库设计三大范式
    SparkSQL小例子
    spark小例子
    spark 分析作者发布文章的总阅读量
    spark和hadoop差异
  • 原文地址:https://www.cnblogs.com/lovellll/p/10126114.html
Copyright © 2011-2022 走看看