Vue子級(jí)如何向父級(jí)傳遞數(shù)據(jù)(自定義事件)

更新時(shí)間：2024年08月15日 15:16:07 作者：專注寫bug

這篇文章主要介紹了Vue子級(jí)如何向父級(jí)傳遞數(shù)據(jù)(自定義事件),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

在上一篇文章中，說(shuō)到了父級(jí)向子級(jí)組件中傳遞對(duì)應(yīng)的數(shù)據(jù)信息，以及增加傳遞數(shù)據(jù)的類型現(xiàn)在、默認(rèn)值填充等規(guī)則。

Vue組件數(shù)據(jù)傳遞與props校驗(yàn)

但使用props只能是單向的數(shù)據(jù)傳遞，也就是由外層父級(jí)向內(nèi)層子級(jí)傳遞，并不能反向進(jìn)行數(shù)據(jù)傳遞。

如何實(shí)現(xiàn)子級(jí)組件向父級(jí)組件傳遞數(shù)據(jù)呢？

子級(jí)向父級(jí)傳遞數(shù)據(jù)實(shí)現(xiàn)

在vue的官網(wǎng)中，給定一個(gè)方式實(shí)現(xiàn)，即子級(jí)組件中使用this.$emit("自定義方法名",參數(shù))的方式，向父級(jí)中進(jìn)行數(shù)據(jù)傳遞。

測(cè)試流程如下：

1、子級(jí)組件中定義動(dòng)態(tài)數(shù)據(jù)，定義按鈕與按鈕的點(diǎn)擊事件。
2、子級(jí)中的方法具體實(shí)現(xiàn)，使用this.$emit("自定義方法名",參數(shù))注冊(cè)新的事件，并傳遞數(shù)據(jù)值。
3、父級(jí)組件中，引用自己組件，并使用@自定義方法名監(jiān)聽子級(jí)自定義事件。
4、父級(jí)組件中指定具體的邏輯方法，處理數(shù)據(jù)并顯示。

代碼如下所示：

子級(jí)組件中定義動(dòng)態(tài)數(shù)據(jù)，定義按鈕與按鈕的點(diǎn)擊事件。
創(chuàng)建自定義事件，并傳遞數(shù)據(jù)信息。

ChildComponentEvent.vue

<template>
 <div class="contChild">
  <h1>子級(jí)組件</h1>
  <button @click="transToFatherMsg">點(diǎn)擊向父級(jí)組件傳值</button>
 </div>
</template>
<script>
export default{
 data(){
  return{
    message:"子級(jí)組件--》專注寫bug 愛(ài)吃香蕉"
  }
 },
 methods:{
  transToFatherMsg(){
   console.log("子級(jí)組件中的點(diǎn)擊事件");
   /**
    * 自定義事件
    * 參數(shù)一：自定義事件名稱
    * 參數(shù)二：自定義事件傳參
    */
   this.$emit("childEvent",this.message);
  }
 }
}
</script>
<style scoped>
.contChild{
border: 1px blue solid;
}
</style>

父級(jí)引用子級(jí)組件，并針對(duì)自定事件回傳值做處理。

ParentComponentEvent.vue

<template>
   <div class="cont">
    <h1>父級(jí)組件</h1>
    <p>收到子級(jí)組件數(shù)據(jù)：{{ getMsg }}</p>
    <!-- 引入子級(jí)組件，并申明監(jiān)聽方法 @子級(jí)組件注冊(cè)自定義方法名  -->
    <ChildComponentEvent @childEvent="getChildMsg"/>
   </div>
</template>
<script>
// 引入子級(jí)組件
import ChildComponentEvent from './ChildComponentEvent.vue';
export default{
 data(){
  return{
   getMsg:""
  }
 },
 components:{ // 注冊(cè)子級(jí)組件
  ChildComponentEvent
 },
 methods:{
  getChildMsg(data){ // 子級(jí)自定義方法觸發(fā)后的具體執(zhí)行邏輯
    console.log("父級(jí)接收子級(jí)組件數(shù)據(jù)傳遞");
    // 賦值
    this.getMsg = data;
  }
 }
}
</script>
<style scoped>
.cont{
 border: 1px red solid;
}
</style>