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

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

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

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

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

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

下面我們可以寫個(gè)簡(jiǎn)單的例子來(lái)演示一下

父組件parent，我們?cè)诶锩嬉肓艘粋€(gè)子組件provideChild

<template>
  <div>
    <button @click="add">點(diǎn)擊增加</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，我們同時(shí)又在子組件里面引入了一個(gè)他的組件

我們可以看到他的打印出注入的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>

接下來(lái)我們可以看一下頁(yè)面的

是可以展示的出來(lái)的，但是我們點(diǎn)擊增加的時(shí)候，子組件們都沒(méi)有響應(yīng)，如果此時(shí)你有好好看文檔的話，就應(yīng)該猜出為什么了

provide必須是個(gè)對(duì)象inject的綁定值才可以響應(yīng)，那么我們可以試一試

//parent父組件的寫法
<template>
  <div>
    <button @click="add">點(diǎn)擊增加</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>

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