vue父組件給子組件的組件傳值provide inject的方法

更新時間：2019年10月23日 15:11:46 作者：吼吼醬

在本篇文章里小編給大家整理的是一篇關于vue父組件給子組件的組件傳值provide inject的方法，需要的朋友們學習下。

一般情況下我們父子之間的傳值用的是props，這個就不多說了，但是如果想讓父給子組件的組件傳值怎么辦呢，這里我們就可以用到 provide 和 inject（依賴注入）

provide/inject需要一起使用，我們可以從父組件的provide傳值，子組件或者孫組件，就可以用inject來接受子組件的provide屬性值

具體的可以看官網(wǎng)介紹provide/inject:https://cn.vuejs.org/v2/api/#provide-inject

下面我們可以寫個簡單的例子來演示一下

父組件parent，我們在里面引入了一個子組件provideChild

<template>
  <div>
    <button @click="add">點擊增加</button>
    <provideChild/>
  </div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
  components:{provideChild},
  data () {
    return {
      foo:5
    }
  },
  //依賴注入傳值
  provide(){
    return{
      newFoo:this.foo
    }
  },
  methods:{
    add(){
      this.foo ++
    },
  }
}
</script>

子組件provideChild，我們同時又在子組件里面引入了一個他的組件

我們可以看到他的打印出注入的newFoo值5

<template>
<section>
  <div>我是子組件：{{newFoo}}</div>
  <childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
  components:{
    childChild
  },
  inject:['newFoo'],
  mounted(){
    console.log(this.newFoo)
  },
  
}
</script>

孫子組件childChild

<template>
  <div>我是子組件的組件：{{newFoo}}</div>
</template>
<script>
export default {
  inject:['newFoo'],
}
</script>

接下來我們可以看一下頁面的

是可以展示的出來的，但是我們點擊增加的時候，子組件們都沒有響應，如果此時你有好好看文檔的話，就應該猜出為什么了

provide必須是個對象inject的綁定值才可以響應，那么我們可以試一試

//parent父組件的寫法
<template>
  <div>
    <button @click="add">點擊增加</button>
    <provideChild/>
  </div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
  components:{provideChild},
  data () {
    return {
      fooObj:{
        foo:5
      }
    }
  },
  //依賴注入傳值
  provide(){
    return{
      newFoo:this.fooObj
    }
  },
  methods:{
    add(){
      this.fooObj.foo ++
    },
  }
}
</script>

//子組件provideChild
<template>
<section>
  <div>我是子組件：{{newFoo.foo}}</div>
  <childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
  components:{
    childChild
  },
  inject:['newFoo'],
  mounted(){
    console.log(this.newFoo)
  },
  
}
</script>

//孫子組件childChild
<template>
  <div>我是子組件的組件：{{newFoo.foo}}</div>
</template>
<script>
export default {
  inject:['newFoo'],
}
</script>

這樣我們就可以操作父組件的添加方法，得到子孫組件的響應