vue子組件數(shù)據(jù)變了為什么父組件沒(méi)有變？

不是父子通信時(shí)不使用計(jì)算屬性子組件改變時(shí)也會(huì)影響父組件的數(shù)據(jù)嗎？為什么這個(gè)子組件+1了父組件卻還是10？還是我寫(xiě)的例子本身就不對(duì)？

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
   </style>
   <script src="vue.js"></script>
   <script type="text/javascript">
      window.onload=function(){
         var user={
            template:'#my_div',
            props:['message'],
            methods:{
              add(){
                this.message++;
                this.$emit('increment1');
              }
            }
         }
         new Vue({
               el:'#app',
               data:{
                test:10
               },
               components:{
                  'user':user
               },
               methods:{
                  incrementTotal: function () {
                      alert(this.test);
                  }
               }
         })
      }
   </script>
</head>
<body>
<template id="my_div">
  <div>
    <h3>{{message}}</h3>
    <button @click=add()>增加</button>
  </div>
</template>
<div id="app">
    <user :message="test" v-on:increment1="incrementTotal"></user>
</div>
</body>
</html>

回答

編輯回答

替身

寫(xiě)的例子是有問(wèn)題的.
來(lái)理一下思路:
父組件: test(10),通過(guò)props 單向傳遞給子組件 --->test(10) ,message(10),

子組件: 每當(dāng)click一下就message 就+1, message非對(duì)象/數(shù)組, 所以對(duì)父組件的test沒(méi)有影響 ---> test(10), message(11).

子組件并觸發(fā)父組件的increment1事件,父組件執(zhí)行了 alert(this.test);--->test(10), message(11)
這個(gè)過(guò)程并沒(méi)有對(duì)父組件test有任何的改變.所以還是10.

實(shí)現(xiàn)改變父組件的test可以這么做:

// 1, 傳參給父組件
add(){
    this.message++;
    this.$emit('increment1',this.message);
  }
...
 incrementTotal: function (message) {
    this.test= message;
    alert(this.test);
      }
// 2. 直接觸發(fā)父組件的+1操作
add(){
    this.message++;
    this.$emit('increment1');
  }
...
 incrementTotal: function () {
    this.test++;;
    alert(this.test);
    }

2017年3月15日 14:45

編輯回答

孤影

寫(xiě)的例子有問(wèn)題，不要直接操作父組件傳過(guò)來(lái)的message，看看文檔

可以在子組件這樣設(shè)置

prop:['message'],
data(){
    msg:this.message//初始化,避免直接操作prop
},
methods:{
    add(){
        this.msg++;
        this.$emit('add',this.msg);
    }
}

在父組件監(jiān)聽(tīng)add，然后更新父組件的test值。

2018年5月4日 08:07

編輯回答