1. 程式人生 > >vue父子元件props傳值,如何在子元件method裡拿到父元件資料

vue父子元件props傳值,如何在子元件method裡拿到父元件資料

子元件掛載的時候,props傳值,資料掛載命名:用駝峰命名法命名,在子元件在methods裡才可以通過this.xx獲取。注意命名要規範。父元件通過props傳值給子元件,子元件在methods裡要拿到父元件傳遞過來的資料有2種情況:第一種:父元件傳遞的引數是固定的,data裡面定義的引數,這時候在子元件通過this.xxx就可以獲取到,但是要注意命名方式,如下:父元件裡:子元件在父元件掛載時繫結資料,注意前面要以“-”連線,後面要以駝峰規則命名
,data裡面的資料命名
子元件獲取的時候:通過props接收
這樣,在methods裡就能通過this.userName獲取到父元件的資料。第二種情況:父元件傳遞的引數是動態改變的,這種在子元件裡按照上面的方式是獲取不到動態改變後的資料的。這種情況下也有2種解決方法(也許還有其他方法)1、用v-if 定義一個flag,初始為false,在動態改變了username的時候flag設定為true,父元件:
子元件:
通過this.username就可以拿到動態改變後的資料2、在子元件用watch監聽資料的變化。 watch: { username: function(newVal,oldVal){ console.log(newVal,oldVal) } },