provide/inject

provide/inject 可以在对子孙组件进行数据传递，类似React中的context。

需要注意的是他不是一个响应式的数据

基础使用

// 父组件
provide:{
  return {
    str: '文案'
  }
},
// 子孙组件
inject:[ 'str' ]
this.str // 直接使用就行

响应式使用

可以通过父组件传入一个响应式的值来实现

循环赋值使用

// 父组件
provide:{
  return {
    optionList:this.optionList
  }
},
// 赋值时
  res.data.forEach((i) => {
    this.optionList[i] = res.data[i]
}

// 子孙组件
inject:[ 'optionList' ]
//  直接通过this.optionList 使用就可以了

如果在父组件直接赋值使用时，需要在子组件使用computed属性传递一下。

// 父组件
provide:{
  return {
    optionList: this.optionList
  }
},

// 子孙组件
inject:[ 'optionList' ]
computed:{
  poptionList(){
    return this.optionList
  }
},
//  使用计算属性返回的值poptionList就可以了

如果直接将 res.data.list 赋值给 this.optionList ，那么 optionList 数组将会被替换成 res.data.list 数组，而不是将 res.data.list 数组中的元素添加到 optionList 数组中。这意味着， optionList 数组将不再是一个空数组，而是一个包含了 res.data.list 数组中所有元素的新数组，这可能会导致下拉列表的渲染出现问题。
相比之下，使用数组的 push() 方法将 res.data.list 数组中的元素添加到 optionList 数组中，可以保持 optionList 数组的原有元素不变，并且可以确保下拉列表的渲染正常。