Vue入門--第五天--provide/inject

Vue-provide-inject

子元件要改變父元件的資料
父元件中

provide(){
  return {
    themName: this.themName
  };
},
data(){
  return {
    themName: "blue",
    fontSize: "normal"
  };
},

上面的provide就把themName提供給別人了，不過themName是字串，不是物件陣列這些提供引用，外面改了是沒有用的，因為是提供了複製的字串。

子元件中

inject: ["themName"],

就能使用這個themName了。
要改變這個值，就從父元件傳遞函式就好了。

父元件中

provide(){
  return {
    themName: this.themName,
    changeTheme: this.changeTheme
  };
},
data(){
  return {
    themName: "blue",
    fontSize: "normal"
  };
},
methods: {
  changeTheme(){
    if(this.themeName === 'blue'){
      this.themeName = 'red'
    }else {
      this.themeName = 'blue'
    }
  },
}

子元件中
inject: ["themName", "changeTheme"],
子元件中就可以在methods中使用

methods: {
  x(){
    this.changeTheme()
  }
}

通過this來呼叫,然後通過傳遞過來的函式，來改變父元件中的data資料。

總結

provide和inject
作用：大範圍的data和method共用
注意：值和改變值的方法都要傳遞過去。

引用（物件，陣列）可以傳過去，直接不用方法改父元件的資料，但是感覺不規範，不用傳方法就可以改變了，很容易不知道資料在哪被改變。