這里講解一下子組件向父組件傳遞值的常用方式。 這里通過一個加減法的實例向大家說明一下，這個的原理。
如下圖所示：
當沒有任何操作的時候父組件的值是 0
當點擊加號以后父組件的值是 1
當點擊減號以后父組件的值是減一變成 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>子組件將數據傳遞給父組件</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>這里是子組件里面的內容！</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); } }})//執行一個組件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>這里是父組件里面的內容！</p> <p>子組件傳遞的值：<b>{{ total }}</b></p> <counter v-on:increment="incrementTotal"></counter> </div></body></html>總結
以上所述是小編給大家介紹的vue中子組件向父組件傳遞數據的實例代碼(實現加減功能) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
