vue2

vue/高阶/project1/src/App.vue

@@ -4,7 +4,7 @@
     <!-- 3.使用组件 -->
      <Demo1 ref="getMain"></Demo1>
      <br>
-     <Demo2></Demo2>
+     <Demo2  :age="3" :dd="xxx"></Demo2>
   </div>
 </template>
 
@@ -13,6 +13,11 @@
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
 export default {
+    data() {
+        return {
+          xxx:"你好"
+        }
+    },
   // 2.组件的注册
   components:{
     Demo1,

vue/高阶/project1/src/components/Demo2.vue

@@ -1,12 +1,38 @@
 <template>
   <div>
     <h1>我是第二个组件</h1>
+    <h3>我叫:{{ name }},今年{{ age }}岁,{{ dd }}</h3>
   </div>
 </template>
 
 <script>
 export default {
+    name:"Demo2",
+    data() {
+        return {
 
+        }
+    },
+    // props:['name','age','dd']
+    // props:{
+    //     name:String,
+    //     age: Number,
+    //     dd:String
+    // }
+    props:{
+        name:{
+            type:String,
+            required: false
+        },
+        age:{
+            type:Number,
+            required: true
+        },
+        dd:{
+            type:String,
+            required: true
+        },
+    }
 }
 </script>