vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
這里講解一下子組件向父組件傳遞值的常用方式。 這里通過(guò)一個(gè)加減法的實(shí)例向大家說(shuō)明一下，這個(gè)的原理。
如下圖所示：
當(dāng)沒(méi)有任何操作的時(shí)候父組件的值是 0
當(dāng)點(diǎn)擊加號(hào)以后父組件的值是 1
當(dāng)點(diǎn)擊減號(hào)以后父組件的值是減一變成 0
具體代碼我直接貼出來(lái)，剛出爐的代碼。
<!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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)的相關(guān)資料,文中通過(guò)圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽(tīng)說(shuō)很快，嘗試一下，感興趣的可以了解一下2021-06-06
Vue實(shí)現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無(wú)法打開(kāi)”的解決方法
xlsx用于讀取解析和寫(xiě)入Excel文件的JavaScript庫(kù),它提供了一系列的API處理Excel文件,使用該庫(kù),可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無(wú)法打開(kāi)的解決方法,需要的朋友可以參考下2024-01-01
VueJS頁(yè)面渲染之后如何調(diào)用函數(shù)
這篇文章主要介紹了VueJS頁(yè)面渲染之后如何調(diào)用函數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開(kāi)的方法
對(duì)于瀏覽器來(lái)說(shuō),文本、圖片等可以直接打開(kāi)的文件,不會(huì)進(jìn)行自動(dòng)下載,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開(kāi)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
解決axios發(fā)送post請(qǐng)求上傳文件到后端的問(wèn)題(multipart/form-data)
這篇文章主要介紹了如何使用axios發(fā)送post請(qǐng)求上傳文件到后端(multipart/form-data),本文給大家?guī)?lái)了問(wèn)題原因及解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果的相關(guān)資料,vue的過(guò)渡動(dòng)畫(huà)主要是transition標(biāo)簽的使用,配合css動(dòng)畫(huà)實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
目前項(xiàng)目中比較常用的第三方支付無(wú)非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁(yè)面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁(yè)面喚起支付寶支付,需要的朋友可以參考下2019-04-04