父元件與子元件之間的傳值 props

2022-09-02 19:30:12 字數 581 閱讀 9902

###父元件與子元件之間的傳值

在實際專案中,我們會遇到很多導航欄.若將這麼多的tab欄寫在乙個頁面,會很麻煩,也會很複雜.

那麼,我們怎樣做呢?

1.在主頁面中可以用switchtab去定義好li標籤

2.在data中定義tabname

可以為空值,也可以初始化乙個值

tabname: ' ',//最好有乙個預設的值,可以預設開啟改頁面標籤

3.在js中書寫switch函式

switchtab (tabname) ,

4.定義元件化

準備完畢,就可以定義元件化,

is="'view'+tabname"   //是要定義子元件的命名名稱    

:order-id="orderid" :detail-info="detailinfo" :module="module"  //傳給子元件的資料

5.在js中呼叫子元件

components:

6.子元件用父元件的資料

props: ['info', 'detailinfo'],  //需要用到的資料 通過props去傳值

即可使用從父元件傳來的資料

關於react 子元件父元件之間的傳值

寫在前面 這裡用到的pageinationitem元件是ant design提供的。當然你也可以自定義元件。需要新增待傳遞的變數名稱和變數資料 defaultpagesize current total pages 方法 通過construcror props 的super props 接收 用這個...

Vue 父元件與子元件的傳值

建立 vue 例項,得到 viewmodel 建立的第一種方式 使用 vue.extend 來建立全域性的vue元件 varcom1 vue.extend vue.component mycom1 com1 varvm new vue methods components template 注意 元...

子元件傳值給父元件

原理 在父元件引用子元件時,通過事件繫結機制把乙個方法aaaa的引用傳給子元件,這個方法中可以有各種引數,子元件在觸發自己的函式或者某些資料發生變化時,觸發 事件繫結機制繫結的函式,通過引數的方式將要傳的值傳過來,父元件中處理,也就接到了子元件的值 最開始父元件本身有乙個方法 fathermetho...