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)加減功能) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: