Vue ref属性 && props配置项

 

// #    ref属性：
// #        1.用来给元素或者子组件注册引用信息(id的替代者)
// #        2.应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
// #        3.使用方法：
// #            打标识：<h1 ref="title">....</h1>
// #            获取：console.log(this.$refs.title);

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDOM" ref="btn">点我显示上面h1的DOM</button>
        <School ref="school"></School>
    </div>
</template>

<script>
    import School from './components/School.vue'

    export default {
        name: 'App',
        components:{
            School,
        },
        data(){
            return {
                msg: 'hello'
            }
        },
        methods:{
            showDOM(e){
                console.log(this.$refs.title);  // 真实DOM元素
                console.log(this.$refs.btn);    // 真实DOM元素
                console.log(this.$refs.school); // School组件的实例对象
            }
        }
    }
</script>

<style scoped>

</style>

 

// 配置项props
//         功能：让组件接受外部传过来的数据
//             1.传递数据：<Demo name="xxx" />
//             2.接受数据：
//                 .第一种方式（只接受）：props:['name']
//                 .第二种方式（限制类型）:props:{name: String}
//                 .第三种方式（限定类型、限制必填、指定默认值）:props:{name: {type:String,required:true,default:'zhangsan'}}
//         备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后去修改data中的数据
<template>
    <div class="school">
        <h1>这里是{{msg}}信息</h1>
        <h3>名字：{{name}}</h3> <br />
        <h3>性别：{{sex}}</h3> <br />
        <h3>年龄：{{myAge+1}}</h3> <br />
        <button @click="addAgeOne">点我年龄+1</button>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data(){
            return {
                msg: '学生',
                // name: 'Tony',
                // sex: 'man',
                myAge: this.age
            }
        },
        // props:['name', 'age', 'sex'],
        // props:{
        //     name: String,
        //     age: Number,
        //     sex: String
        // },
        props:{
            name:{
                type:String,
                required: true,
            },
            age:{
                type:Number,
                default: 99
            },
            sex:{
                type:String,
                required:true
            }
        },
        methods:{
            addAgeOne(e) {
                this.myAge++;
                console.log('addAgeOne');
            }
        }

    }
</script>

<style scoped>
    .school{
        background-color: orange;
    }
</style>