官網上說provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。

provide：

Object | () => Object（一個物件或返回一個物件的函式）

inject：

Array | { [key: string]: string | Symbol | Object }（一個字串陣列，或一個物件，物件的 key 是本地的繫結名）

要實現父子元件響應，父元件傳遞的資料型別必須是物件Object，子元件接收的資料型別必須是物件Object，其他資料型別都是不好使的

provide和inject響應的例子：

父元件：

<template>
 <div class="menu">
  <label>父元件輸入框：</label>
  <input v-model="level.name" @change="levelChange(level.name)"/>
  <!-- 子元件 -->
  <my-list></my-list>
 </div>
</template>

<script>
import MyList from '@/pages/user/children/MyList'

export default {
 components:{MyList},provide(){
  return {
   userLevel:this.level,} 
 },data(){
  return{
   level:{name:"初始化"},methods:{
  levelChange(val){
   this.userLevel = this.level;
   console.log(this.userLevel )//可以打印出物件屬性name值改變了
  }
 }
}
</script>

子元件（MyList.vue）

<template>
 <div class="my-list"> 
  <p>子元件接收資料：{{userLevel.name}}</p>
  <label>父元件輸入框:</label><input type="text" v-model="userLevel.name">
 </div>
</template>

<script>
export default {
 // inject:['userLevel'],inject:{
  userLevel:{
   default:()=>{}
  },},data(){
  return{
  }
 } 
}
</script>

輸出：

初始化：

修改父元件資料：輸入框的值是"初始"，子元件也輸出"初始

修改子元件資料：輸入框的值是"子元件"，父元件輸入框也顯示"子元件"

好啦，provide和inject實現響應，父元件的資料修改影響了子元件的更新，子元件的資料修改同樣影響了父元件的更新。

資料格式為物件Object的型別，父元件修改資料影響子元件，子元件修改資料影響父元件，感覺和物件的儲存有關，物件格式資料儲存的是指標而不是資料，所以父子元件其實是用的同一個物件，修改的也是同一個物件，因此會實現雙向響應改變，不知道我這樣理解的是由有問題。

補充知識：vue監聽賦值值以及provide與inject

vue 當父元件 改變 子元件的props 卻不變

 watch: {
 'oState': function (val,oldval) {
  this.getOrderList({orderStatus: this.getOrderState(this.oState),pageSize: 1})
 },// 深度 watcher
  c: {
  handler: function (val,oldVal) { /* ... */ },deep: true
  },

$refs

 <ul class="comment-list" v-if="list" ref="commentList"></ul>
 scrollToTop () {
 this.$refs.commentList.scrollTop = 0
 }

$el

this.$refs.studentListDialog.$el.querySelector('.el-dialog')

vm.$once( event,callback )

引數：

{string} event

{Function} callback

用法：

監聽一個自定義事件，但是隻觸發一次，在第一次觸發之後移除監聽器。

vm.$off( [event,callback] )

引數：

{string | Array<string>} event (只在 2.2.2+ 支援陣列)

{Function} [callback]

用法：

移除自定義事件監聽器。

如果沒有提供引數，則移除所有的事件監聽器；

如果只提供了事件，則移除該事件所有的監聽器；

如果同時提供了事件與回撥，則只移除這個回撥的監聽器。

vm.$destroy()

用法：

完全銷燬一個例項。清理它與其它例項的連線，解綁它的全部指令及事件監聽器。

觸發 beforeDestroy 和 destroyed 的鉤子。

當生成vue例項後，當再次給資料賦值時，有時候並不會自動更新到檢視上去

 obj:{
 arr:[]
 }

雙向繫結後無法直接改變obj.arr

需要新增一個arr賦值或者

this.$set(this.ruleForm,'date',time)

vue.set(target,key,value)

引數

{object | Array} target

{string | number} key

{any} value

this.$set()和Vue.set()本質方法一樣，前者可以用在methods中使用。

set方法呼叫時，可以觸發頁面全部重新渲染。

provide：Object | () => Object

inject：Array<string> | { [key: string]: string | Symbol | Object }

這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

provide 選項應該是一個物件或返回一個物件的函式。該物件包含可注入其子孫的屬性。在該物件中你可以使用 ES2015 Symbols 作為 key，但是隻在原生支援 Symbol 和 Reflect.ownKeys 的環境下可工作。

inject 選項應該是：

一個字串陣列，或

一個物件，物件的 key 是本地的繫結名，value 是：

在可用的注入內容中搜索用的 key (字串或 Symbol)，或

一個物件，該物件的：

from 屬性是在可用的注入內容中搜索用的 key (字串或 Symbol)

default 屬性是降級情況下使用的 value

提示：provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。

示例：

// 父級元件提供 ‘foo'

 var Provider = {
 provide: {
  foo: 'bar'
 },// ...
 }

// 子元件注入 'foo'

 var Child = {
 inject: ['foo'],created () {
  console.log(this.foo) // => "bar"
 }
 // ...
 }

以上這篇vue 解決provide和inject響應的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。