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é)合上面的分析理解代碼）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>子向父通信</title> 
  <style> 
    #app { 
      border: 1px solid blue; 
      width: 500px; 
      padding: 20px; 
      margin: auto; 
      border-radius: 8px; 
      background: fuchsia; 
    } 
    #wrapper { 
      border: 1px solid red; 
      width: 400px; 
      padding: 20px; 
      border-radius: 8px; 
      background: yellowgreen; 
      margin-top: 20px; 
    } 
  </style> 
  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
</head> 
<body> 
  <div id="app"> 
    <!-- 父組件 --> 
    <h2>這是父組件</h2> 
    <p>展示父級(jí)接收到的消息:{{msg}}</p> 
    <button @click="useChild(szStr)">調(diào)用子組件的方法</button> 
     <!-- cus-event為子組件自定義的事件名； doAction($event)為父組件的事件，參數(shù)$event不可少也不可寫成其他--> 
    <!-- ref表示組件的別名 --> 
    <child @cus-event="doAction($event)" ref="child1"></child> 
  </div> 
</body> 
</html> 
<template id="child"> 
  <div id="wrapper"> 
    <!-- 子組件 --> 
    <h3>這是子組件</h3> 
    <button @click="sendToParent">向父組件發(fā)消息</button> 
  </div> 
</template> 
<script> 
  let child = { 
    template: '#child', 
    data() { 
      return { 
        msg: '子級(jí)消息' 
      }; 
    }, 
    methods: { 
      sendToParent() { 
        // 子組件只管發(fā)送消息，其中cus-event為自定義事件名（事件名不能寫成駝峰法,多個(gè)單詞用-連接），this.msg為要傳遞的參數(shù)。 
        this.$emit('cus-event', this.msg); 
      }, 
      getMsg(str) { 
        console.log('子級(jí)組件收到父級(jí)的內(nèi)容', str); 
      } 
    } 
  }; 
  // 注意: .$mount('#app')跟實(shí)例內(nèi)部el: '#app'是等價(jià)的 
  new Vue({ 
    data: { 
      msg: '', 
      szStr:'父級(jí)消息' 
    }, 
    components: { 
      child 
    }, 
    methods: { 
      doAction(e) { 
        console.log(this); 
        console.log(e); 
        this.msg = e; 
      }, 
      useChild(str) { 
        // 調(diào)用子組件的方法 
        // console.log(this); 
        // console.log(this.$refs); 
        // this.$refs.child1得到的子組件實(shí)例 
        this.$refs.child1.getMsg(str); 
      } 
    } 
  }).$mount('#app'); 
</script>

網(wǎng)頁(yè)題目：Vue子組件向父組件通信與父組件調(diào)用子組件中的方法-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.bm7419.com/article20/dgcjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、小程序開(kāi)發(fā)、App開(kāi)發(fā)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容