vue子组件数据变了为什么父组件没有变？

<!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>

MYYA

浏览 1519回答 1

1回答

慕码人2483693

写的例子有问题，不要直接操作父组件传过来的message，看看文档可以在子组件这样设置prop:['message'],data(){     msg:this.message//初始化,避免直接操作prop}, methods:{     add(){        this.msg++;        this.$emit('add',this.msg);     } }在父组件监听add，然后更新父组件的test值。

随时随地看视频慕课网APP