父组件向子组件传递数据

huang303513 · huang303513 · commit 65752ea5996d · 2016-09-30T17:37:29.000+08:00
diff --git a/vuejs入门基础/my-second-vue-project/src/App.vue b/vuejs入门基础/my-second-vue-project/src/App.vue
@@ -7,21 +7,22 @@
         {{item.label}}
       </li>
     </ul>
+    <component-a msgfromfather='you die!'></component-a>
   </div>
 </template>
 
 <script>
   import Store from './store'
+  import ComponentA from './components/componentA'
   export default {
     data: function () {
       return {
         title: 'this is a todo list',
         items: Store.fetch(),
-        newItem: '',
-        liClass: 'thisisliClass'
-
+        newItem: ''
       };
     },
+    components:{ComponentA},
     watch:{
         items:{
             handler:function(items){
diff --git a/vuejs入门基础/my-second-vue-project/src/components/componentA.vue b/vuejs入门基础/my-second-vue-project/src/components/componentA.vue
@@ -1,15 +1,23 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
+    <h1>{{msgfromfather}}</h1>
+    <button v-on:click="onClickMe">Click!</button>
   </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
-      msg: 'Hello Vue!'
+      msg: 'hello from component a!'
     }
+  },
+  props:['msgfromfather'],
+  methods:{
+      onClickMe:function(){
+          console.log(this.msgfromfather);
+      }
   }
 }
 </script>
@@ -20,3 +28,5 @@ h1 {
   color: #42b983;
 }
 </style>
+
+
