1. 程式人生 > >**Vue父子元件之間傳值:*

**Vue父子元件之間傳值:*

初學者總結。Vue父子元件之間傳值:
1.父元件到子元件的傳值:
a,父元件引入元件並註冊完成:
import PersonnelUpdate from “./PersonnelUpdate”;
export default {
components: { PersonnelUpdate },
data() {
return {
pergroupListname: {},
}
}
}
b,在引用的位置應用:(groupPerName在子元件中接收的變數,pergroupListname父元件中的變數)

c,在子元件中接收:
export default {
props: [“modes”, “groupPerName”, “groupPerId”],

2.子元件到父元件的傳值:
a,點選時觸發一個方法傳值到父元件:
cancelBtn() {
this. M e s s a g e .

e r r o r ( "
" ) ; t h i s . Message.error("已取消操作"); this. emit(“cancelChild”);
},
b,在父元件中巢狀進去:
<PersonnelUpdate @cancelChild=“cancel” >
c,在父元件中接收:
finish() {
this.searchPerson("");//傳參到此處,觸發父元件中的方法searchPerson("")
},

注:如有不妥之處望留言指正!!!