1. 程式人生 > 其它 >vue 父子元件渲染

vue 父子元件渲染

問題描述:父元件呼叫了一個子元件,傳遞了一個id的屬性到子元件,

但是在子元件中將這個id的props屬性賦值給了data裡面定義的另外一個屬性myId,並且寫了watch監聽這個id的props。

結果:第一次的時候子元件並沒有更新介面(即data裡面的myId屬性沒有更新);第二次及以後就都可以了

原因:第一次穿過來的值並沒有賦值給myId,導致介面沒有更新,只要在mounted裡面賦值一次即可。

子元件其實和父元件一起在mounted之前就已經被DOM渲染到了頁面,但是之後操作父元件產生新的值同樣會實時更新的子元件

(其實父子元件在原理上是相當於在同一個元件裡面的,區分父子元件的原因只是為了開發簡單,但渲染後其實也只有一個頁面)。

如果在子元件直接使用props的屬性名在頁面中渲染,不用在mounted裡面給第一次賦值,也不用在watch裡面監聽props的變化;

但是如果在子元件裡面將props賦值給子元件自身的每一個data,就需要在mounted裡面給第一次賦值(只是針對第一次),

並且需要在watch裡面監聽props的變化並重新賦值(第一次之後才會進入到watch,即頁面的mounted生命週期之後將DOM渲染完成,才會進入wacth這個方法)!