1 // #    ref屬性：
 2 // #        1.倍用啦給元素或者子元件註冊引用資訊(id的替代者)
 3 // #        2.應用在html標籤上獲取的是真實的DOM元素，應用在元件標籤上是元件例項物件（vc）
 4 // #        3.使用方法：
 5 // #            打標識：<h1 ref="title">....</h1>
 6 // #            獲取：console.log(this.$refs.title);
 7 
 8 <template>
 9     <div>
10         <
 
h1 v-text="msg" ref="title"></h1>
11         <button @click="showDOM" ref="btn">點我顯示上面h1的DOM</button>
12         <School ref="school"></School>
13     </div>
14 </template>
15 
16 <script>
17     import School from './components/School.vue'
18 
19     export 
 
default {
20         name: 'App',
21         components:{
22             School,
23         },
24         data(){
25             return {
26                 msg: 'hello'
27             }
28         },
29         methods:{
30             showDOM(e){
31                 console.log(this.$refs.title);  // 真實DOM元素
 

32                 console.log(this.$refs.btn);    // 真實DOM元素
33                 console.log(this.$refs.school); // School元件的例項物件
34             }
35         }
36     }
37 </script>
38 
39 <style scoped>
40 
41 </style>

 1 // 配置項props
 2 //         功能：讓元件接受外部傳過來的資料
 3 //             1.傳遞資料：<Demo name="xxx" />
 4 //             2.接受資料：
 5 //                 .第一種方式（只接受）：props:['name']
 6 //                 .第二種方式（限制類型）:props:{name: String}
 7 //                 .第三種方式（限定型別、限制必填、指定預設值）:props:{name: {type:String,required:true,default:'zhangsan'}}
 8 //         備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請賦值props的內容到data中一份，然後去修改data中的資料
 9 <template>
10     <div class="school">
11         <h1>這裡是{{msg}}資訊</h1>
12         <h3>名字：{{name}}</h3> <br />
13         <h3>性別：{{sex}}</h3> <br />
14         <h3>年齡：{{myAge+1}}</h3> <br />
15         <button @click="addAgeOne">點我年齡+1</button>
16     </div>
17 </template>
18 
19 <script>
20     export default {
21         name: 'School',
22         data(){
23             return {
24                 msg: '學生',
25                 // name: 'Tony',
26                 // sex: 'man',
27                 myAge: this.age
28             }
29         },
30         // props:['name', 'age', 'sex'],
31         // props:{
32         //     name: String,
33         //     age: Number,
34         //     sex: String
35         // },
36         props:{
37             name:{
38                 type:String,
39                 required: true,
40             },
41             age:{
42                 type:Number,
43                 default: 99
44             },
45             sex:{
46                 type:String,
47                 required:true
48             }
49         },
50         methods:{
51             addAgeOne(e) {
52                 this.myAge++;
53                 console.log('addAgeOne');
54             }
55         }
56 
57     }
58 </script>
59 
60 <style scoped>
61     .school{
62         background-color: orange;
63     }
64 </style>