vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
更新時(shí)間：2018年04月20日 09:34:25 投稿：mrr
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ,需要的朋友可以參考下
這里講解一下子組件向父組件傳遞值的常用方式。 這里通過一個(gè)加減法的實(shí)例向大家說明一下，這個(gè)的原理。
如下圖所示：
當(dāng)沒有任何操作的時(shí)候父組件的值是 0
當(dāng)點(diǎn)擊加號(hào)以后父組件的值是 1
當(dāng)點(diǎn)擊減號(hào)以后父組件的值是減一變成 0
具體代碼我直接貼出來，剛出爐的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子組件將數(shù)據(jù)傳遞給父組件</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
//定義一個(gè)組件
Vue.component('counter', {
template: '\
<div style="background:#eee;width: 238px;">\
<div>這里是子組件里面的內(nèi)容！</div>\
<div style="margin-top:20px"></div>\
<div>\
<span style="margin-right:20px;display:inline-block;">加法運(yùn)算</span><button @click="incrementCounter">+</button>\
</div>\
<div>\
<span style="margin-right:20px;margin-top:20px;display:inline-block;">減法運(yùn)算</span><button @click="deleteCounter">-</button>\
</div>\
</div>\
',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1;
this.$emit('increment',1);
},
deleteCounter: function () {
this.counter -= 1;
this.$emit('increment',2);
}
}
})
//執(zhí)行一個(gè)組件
window.onload = function(){
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods:{
incrementTotal: function (val) {
if(val==1){
this.total += 1;
}else{
if(this.total<=0){
this.total = 0;
}else{
this.total -= 1;
}
}
}
}
})
}
</script>
<body>
<div id="app" style="background:red;width: 238px;">
<p>這里是父組件里面的內(nèi)容！</p>
<p>子組件傳遞的值：<b>{{ total }}</b></p>
<counter v-on:increment="incrementTotal"></counter>
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下，感興趣的可以了解一下2021-06-06
Vue實(shí)現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無法打開”的解決方法
xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的方法
對(duì)于瀏覽器來說,文本、圖片等可以直接打開的文件,不會(huì)進(jìn)行自動(dòng)下載,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
解決axios發(fā)送post請(qǐng)求上傳文件到后端的問題(multipart/form-data)
這篇文章主要介紹了如何使用axios發(fā)送post請(qǐng)求上傳文件到后端(multipart/form-data),本文給大家?guī)砹藛栴}原因及解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
Vue3?Transition組件給頁面切換并加上動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動(dòng)畫效果的相關(guān)資料,vue的過渡動(dòng)畫主要是transition標(biāo)簽的使用,配合css動(dòng)畫實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
目前項(xiàng)目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下2019-04-04