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

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

場景原型

實現：<el-input type="text" :value="inputValue" style="width: 200px"></el-input>

（1）子組件定義與使用

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

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

2、在子組件中展示

<el-input type="text" :value="inputValue" style="width: 200px"></el-input>

（2）父組件引用子組件與傳值

1、父組件引用子組件

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

2、在子組件中綁定

<subOneComponent :inputValue="inputValue"></subOneComponent>

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

結果展示：

實現結果

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

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

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!