1. 程式人生 > 實用技巧 >Vue provide / inject可監聽的物件

Vue provide / inject可監聽的物件

提示provideinject 繫結並不是可響應的。這是刻意為之的。然而,如果你傳入了一個可監聽的物件,那麼其物件的 property 還是可響應的。

可監聽的響應物件: Array, Object

父級元件

provide() {
  const { obj, arr, fun } = this
  return {
    obj, arr, fun,
    newfun: param => 'newfun' + obj.foo + param // fun 的另一種方式。其中帶有 arr 或 obj 的值,可同步更新
  }
},
data() {
  obj: {
    foo: 'foo',
    bar : 'bar'
  },
  arr: ['foo', 'bar'],
  fun: param => 'fun' + param
}

子孫元件

// 可響應物件
onject: ['obj', 'arr'],
created() {
  // 響應更新
  this.obj.foo = 'new foo' // 輸出: new foo
  this.arr[1] = 'new bar' // 輸出: new bar
}
// 通過函式呼叫方式使用
onject: ['fun'],
created() {
  // 響應更新
  console.log(this.fun()) // 輸出: fun
}

fun模式可通過初始賦值修改影響當前值,或者通過父級元件修改影響所有值(子級修改當前域,父級修改所有域)

arr``obj修改影響所有域(不管子級修改還是父級修改都一樣)