Vue 父子元件之間的多種通訊方法,簡單易用

2021-08-25 08:41:46 字數 855 閱讀 3378

父元件傳值到子元件

方法

一、父元件的資料直接繫結到子元件上面,在子元件就可以通過頁面的props直接用父元件的資料了

注意:這種方法是單向繫結,子元件不能改變父元件的值

父元件傳遞

子元件接收

props: 

},

方法

二、父元件和子元件之間通過v-model實現資料的雙向繫結

注意:這種方法是雙向繫結,子元件和父元件的值相同(vue 2.0不支援這種方式)

父元件傳遞

子元件接收

props: 

},

方法

三、通過方法的監聽,實現父子元件之間的陣列通訊和資料雙向繫結

注意:推薦使用這種方法

父元件

data()

},methods: ,

}

子元件

props: ,

data(),

methods:

}

vue父子元件之間通訊

1 父元件向子傳遞引數 只需要在子元件內使用props即可獲取。2 子元件返回引數給父元件 子元件中設定 emit func data 父元件中直接取出func即可。注意 父元件向子元件傳參是單向的,若子元件直接修改父元件的引數,vue會報錯。如果需要修改,則有2種方式 方式一 在子元件中複製父變數...

Vue元件 父子元件之間的通訊

最近在學習vue,元件之間的通訊是難點也是重點,所以想稍微總結一下。由於元件的模板無法使用父元件中的資料,所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候,它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後,就能將父元件的資...

vue父子元件之間的通訊

父子元件 父子元件的關係 通常元件a在它的模板中使用元件b,此時元件a為父元件,元件b為子元件。父子元件應該解耦,元件例項的作用域是孤立的,子元件中不能直接使用父元件的資料。應該使用props傳遞父元件到子元件的資料,子元件通過events給父元件發訊息,以此實現父子元件間的通訊。如上,在其他元件內...