儿子向父亲传递数据

huang303513 · huang303513 · commit 38b8940b7151 · 2016-09-30T18:20:00.000+08:00
diff --git a/vuejs入门基础/my-second-vue-project/src/App.vue b/vuejs入门基础/my-second-vue-project/src/App.vue
@@ -7,7 +7,8 @@
         {{item.label}}
       </li>
     </ul>
-    <component-a msgfromfather='you die!'></component-a>
+    <p>child tells me: {{childWords}} + {{childWordstow}}</p>
+    <component-a msgfromfather='you die!'  v-on:child-tell-me-something='listenToMyBoy'></component-a>
   </div>
 </template>
 
@@ -19,7 +20,9 @@
       return {
         title: 'this is a todo list',
         items: Store.fetch(),
-        newItem: ''
+        newItem: '',
+        childWords:'',
+        childWordstow:''
       };
     },
     components:{ComponentA},
@@ -31,6 +34,11 @@
             deep:true
         }
     },
+    events:{
+        'child-tell-me-something-two':function (msg) {
+            this.childWordstow = msg;
+        }
+    },
     methods: {
       toggleFinish: function (item) {
         item.isFinished = !item.isFinished;
@@ -42,6 +50,9 @@
           isFinished: false,
         });
         this.newItem = '';
+      },
+      listenToMyBoy:function(msg){
+          this.childWords = msg;
       }
     }
   }
diff --git a/vuejs入门基础/my-second-vue-project/src/components/componentA.vue b/vuejs入门基础/my-second-vue-project/src/components/componentA.vue
@@ -2,22 +2,29 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <h1>{{msgfromfather}}</h1>
-    <button v-on:click="onClickMe">Click!</button>
+    <button v-on:click="onClickMe">open mouse!</button>
+    <button v-on:click="onClickMetwo">open mouse!</button>
   </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
-      msg: 'hello from component a!'
+      msg: 'hello from component a!',
+      msg1:'dispatch msg'
     }
   },
   props:['msgfromfather'],
   methods:{
       onClickMe:function(){
-          console.log(this.msgfromfather);
-      }
+      console.log(this.msgfromfather);
+      this.$emit('child-tell-me-something',this.msg);
+    },
+    onClickMetwo:function(){
+      console.log(this.msgfromfather);
+      this.$dispatch('child-tell-me-something-two',this.msg1);
+    }
   }
 }
 </script>
