vue中子组件向父组件传递数据（实现加减的实例）
生活随笔
收集整理的這篇文章主要介紹了
vue中子组件向父组件传递数据（实现加减的实例）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里講解一下子組件向父組件傳遞值的常用方式。 這里通過一個加減法的實例向大家說明一下，這個的原理。
如下圖所示：
當沒有任何操作的時候父組件的值是 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中子组件向父组件传递数据（实现加减的实例）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue 按钮多次点击重复提交数据
- 下一篇： html5倒计时秒杀怎么做,vue 设