Vue ref属性 && props配置项

 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>