1. 程式人生 > >vue中props(父組傳遞資料給子元件)的使用

vue中props(父組傳遞資料給子元件)的使用

 

通過props關鍵字可以傳遞字串、數字、布林、陣列、物件、函式

 

方式一:

在子元件中用 props關鍵字,後面的每個資料表示的是父元件給子元件要傳遞的值,其值的資料型別由父元件定義

props: ['isShowDialog', 'stepAttributeData','getAllTransFormInfoString'],

 

方式二:

同樣也是用props關鍵字,但是資料結構卻不同。isShowDialog表示的是父元件要傳遞給子元件的值,其值是一個布林型別的資料,如果沒有傳入值,那麼預設為false。getAllTransFormInfoString表示的是父元件傳遞給子元件的一個函式,父元件傳遞一個函式給子元件讓其呼叫,其實子父元件之間的函式傳遞就類似於JS中的函式回撥。

    props: {
      isShowDialog: {
        type: Boolean,
        default: false,
      },
      stepAttributeData:{
        type:Object,
        default: function () {
          return null;
        }
      },
      getAllTransFormInfoString:{
        type:Function,
      }
    },