1. 程式人生 > >vue中props父元件給子元件傳值以及父子元件主動獲值

vue中props父元件給子元件傳值以及父子元件主動獲值

父元件給子元件傳值:

     1.父元件呼叫子元件的時候  在父元件中繫結動態屬性

       <v-header :title='title'  :homemsg='msg'  :run='run'  :home='this'></v-header>

      :home='this'將整個父元件傳給子元件 通過this.home.屬性名或方法名  來引用父元件中的屬性或方法

     2.在子元件裡面通過props陣列接收父元件傳過來的資料,其中第三個值是父元件中的方法,引用時不直接呼叫方法而是作為物件引用。也可以在子元件中穿實參到父元件的形參中。

         

props也可以作為子元件驗證父元件傳遞資料的合法性(很少使用)

      props:{

            'title':String,

            'homemsg':String}

父元件主動獲取子元件的資料和方法:

       1.呼叫子元件的時候定義一個ref

         <v-header ref="header"></v-header>

        2.在父元件裡面通過

          this.$refs.header.屬性

          this.$refs.header.方法

子元件主動獲取父元件的資料和方法:

       this.$parent.資料

       this.$parent.方法