vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
使用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)：
1.
圖中紅色圈中的部分是對(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 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實(shí)例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04
Vue如何通過(guò)Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
在Vue.js開(kāi)發(fā)中,通過(guò)原型屬性為Vue實(shí)例添加全局變量是一種常見(jiàn)做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計(jì)算屬性產(chǎn)生命名沖突,這種方式簡(jiǎn)單有效,確保了變量在所有Vue實(shí)例中的可用性,同時(shí)保持全局作用域的整潔2024-10-10
Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap 前端實(shí)現(xiàn)分頁(yè)和排序效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題
今天小編就為大家分享一篇解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
表格Table實(shí)現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁(yè))
這篇文章主要為大家介紹了表格Table實(shí)現(xiàn)前端全選所有功能,包括非當(dāng)前頁(yè)的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-02-02
這篇文章主要為大家介紹了vue-print-nb只打印一頁(yè)解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-11-11
element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05