vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)

更新時(shí)間：2017年05月27日 15:54:57 作者：fantasy-zxf

這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

使用v-on綁定自定義事件可以讓子組件向父組件傳遞數(shù)據(jù)，用到了this.$emit(‘自定義的事件名稱',傳遞給父組件的數(shù)據(jù))

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="parent-component">
<div>
 <p>總數(shù)是{{total}}</p>
 <child-component @increment="incrementTotal"></child-component>
 <!--@increment是子組件this.$emit('increment'自定義的事件用來(lái)告訴父組件自己干了什么事
 然后會(huì)觸發(fā)父子間incrementTotal的方法來(lái)更新父組件的內(nèi)容)-->
</div>
</template>
<template id="child-component">
 <button @click="increment()">{{mycounter}}</button>
</template>
<script>
 var child=Vue.extend({
  template:"#child-component",
  data:function () {
   return {
    mycounter:0
   }
  },
  methods:{
   increment:function(){
    this.mycounter=10;
    this.$emit("increment",this.mycounter);//把this.mycounter傳遞給父組件
   }
  }
 })
 var parent=Vue.extend({
  data:function () {
   return {
    total:0
   }
  },
  methods:{
   incrementTotal:function(newValue){
    this.total+=newValue;
   }
  },
  template:"#parent-component",
  components:{
   'child-component':child
  }
 })
 var vm=new Vue({
  el:"#app",
  components:{
   'parent-component':parent
  }
 })
</script>
</body>
</html>

@increment是子組件this.$emit('increment'自定義的事件,newValue)用來(lái)告訴父組件自己干了什么事

同時(shí)還可以傳遞新的數(shù)據(jù)給父組件

然后會(huì)觸發(fā)父子間incrementTotal的方法來(lái)更新父組件的內(nèi)容)。

這里需要注意幾個(gè)點(diǎn)：

圖中紅色圈中的部分是對(duì)應(yīng)的，子組件在自己的methods方法里面寫(xiě)自己的事件實(shí)現(xiàn)，然后再父組件里面寫(xiě)字組件時(shí)給子組件綁定上methods方法里面的

事件名稱，要一一對(duì)應(yīng)

這里自定義事件里面的要寫(xiě)父組件的方法名，父組件里面定義該方法。

父組件里面的方法可以接收子組件this.$emit('increment',this.mycounter);傳遞過(guò)來(lái)的數(shù)值:this.mycounter,

到父組件的方法里面就是newValue參數(shù)，這樣就實(shí)現(xiàn)了子組件向父組件傳遞數(shù)據(jù)

以上所述是小編給大家介紹的vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

VUE watch監(jiān)聽(tīng)器的基本使用方法詳解
這篇文章主要介紹了vue使用watch監(jiān)聽(tīng)器的基本使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-10-10
VUE3使用JSON編輯器方式
這篇文章主要介紹了VUE3使用JSON編輯器方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue如何解決watch和methods值執(zhí)行順序問(wèn)題
這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Next.js路由布局機(jī)制詳解
本文主要介紹了Next.js路由布局機(jī)制詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
vue?history模式刷新404原因及解決方法
vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關(guān)于vue?history模式刷新404原因及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決
這篇文章主要介紹了Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01