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