vue: provide和inject的使用

定义说明:

• provide 和 inject 这对选项是在一起使用的, 以允许 一个祖先组件 向其所有的子孙组件 注入一个依赖, 不论组件的层次有多深, 都会在起 上下游 (父子/ 爷孙) 关系里 始终生效
  • 也就是说: 如果组件的引入层次过多, 我们的子孙组件想要获取祖先组件的资源(data中的状态 或者 methods中定义的方法), 就可以使用 provide 和 inject 这对选项进行解决

provide

• provide 是一个对象, 或者是一个返回对象的函数, 里面包含有要传递给子孙后代的 资源;

inject

• inject 是一个字符串数组, 后者是一个对象

示例:

• 父组件中: 在 methods定义了一个 加载表格数据的方法: loadTable()

  data () {
       return {}
  },  
  provide: {
       return {
           loadTable: this.loadTable
       }
  },
  methods: {
      loadTable () { 
          //... 
      }
  }
  

• 然后在后代组件中: 使用 inject 接收父组件 暴露(传递)的 方法: loadTable

  data () {
     return {}
  },
  inject: ['loadTable'],
  

• 之后, 就可以在后代组件中, 使用 this.loadTable() 调动 reject接收的loadTable方法