Vue子組件向父組件通信與父組件調(diào)用子組件中的方法-創(chuàng)新互聯(lián)

子組件向父組件通信

10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有撫遠(yuǎn)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

子組件的button按鈕綁定點(diǎn)擊事件,事件方法名為sendToParent(),

該方法在子組件的methods中聲明,實(shí)現(xiàn)功能this.$emit('cus-event',this.msg);

在父組件引入子組件,并給cus-event事件綁定doAction($event)方法,該方法中this.msg = e;console.log(e),

而msg已經(jīng)在data中聲明,其值為”子級(jí)消息”,故最終的輸出結(jié)果為: 展示父級(jí)接收到的消息:子級(jí)消息

父組件調(diào)用子組件中的方法

點(diǎn)擊父組件的button按鈕,觸發(fā)了click事件指向的useChild方法[該方法的行為是輸出”父級(jí)消息”],

useChild方法在父組件的中的methods中聲明,調(diào)用子組件中的方法,并傳入?yún)?shù)str,即this.$refs.child1.getMsg(str);

而getMsg方法已經(jīng)在子組件的methods中聲明,其行為是console.log('子級(jí)組件收到父級(jí)的內(nèi)容',str);,

所以,最終的輸出結(jié)果為: 子級(jí)組件收到父級(jí)的內(nèi)容 父級(jí)消息

代碼示例（結(jié)合上面的分析理解代碼）

 
 
 
   
   
   
   
 
 
  
 
     
    
這是父組件
 
    
展示父級(jí)接收到的消息:{{msg}}
 
    調(diào)用子組件的方法 
      
     
     
  
 
 
 
 
 

當(dāng)前標(biāo)題：Vue子組件向父組件通信與父組件調(diào)用子組件中的方法-創(chuàng)新互聯(lián)
標(biāo)題URL：http://m.jiaotiyi.com/article/dgcjco.html