vue中父組件如何給子組件傳值

小編給大家分享一下vue中父組件如何給子組件傳值，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

具體的可以看官網介紹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>

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

以上是“vue中父組件如何給子組件傳值”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！