在我們編寫前端代碼時，經常遇到的一種場景，子組件需要使用父組件的值，這種情況下，我們可以使用props幫助我們進行父子組件間的通信。這里我們先模擬一個場景，展示如何使用。

場景：在父組件修改值，傳遞給子組件，子組件進行顯示，如下圖所示。

場景原型

實現：

(1)子組件定義與使用

1、定義子組件subOneComponent.vue，在props中定義父組件傳遞的值；

props: { inputValue: { type: String, // 變量類型 default: function () { // 默認返回值，可以在此處對傳過來的值進行操作 return "" } } },

2、在子組件中展示

(2)父組件引用子組件與傳值

1、父組件引用子組件

import subOneComponent from "@/components/subOneComponent"; export default { name: 'App', components: { subOneComponent }, data() { return { inputValue: '', } }, }

2、在子組件中綁定

再此：父組件中修改inputValue值后將會傳遞給子組件。

結果展示：

實現結果

VUE中父組件向子組件傳遞值是單向數據流：

所有的prop都使得其父子prop之間形成一個單向下行綁定：父級prop的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。

每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。

vue傳值，除了傳字符串以外，還可以傳遞：數字、數組、布爾值、對象等。

總結

以上是生活随笔為你收集整理的vue变量传值_VUE 学习——父组件传值给子组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。