「vue組件通信」父組件向子組件通信props

「vue組件通信」父組件向子組件通信props

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。父組件的數據需要通過 prop才能下發到子組件中。

怎麼做呢?

1、在子組件中,要顯示地用props選項聲明想要接收父組件的數據:

 

{{mytitle}}

上述寫法是控制傳遞參數的類型props還有另一種寫法,這種寫法是直接聲明參數,若是想要對參數加判斷就使用上述寫法

props:['mytitle'],

2、【靜態props】在父組件中,若是單純想要傳一個靜態字符串,直接如下聲明即可:

 

3、【動態props】在父組件中,有很多時候我們傳遞的是一個動態的參數,隨著操作的變化而變化,則這時候父組件需要使用v-bind來綁定動態參數:

 

item是一個動態參數,一般是現在data鉤子裡面定義,然後根據所需的操作進行動態改變數據


分享到:


相關文章: