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

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

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

前言

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

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

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

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

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

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

測試流程如下：

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

代碼如下所示：

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

ChildComponentEvent.vue

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

父級引用子級組件，并針對自定事件回傳值做處理。

ParentComponentEvent.vue

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