35ref标签属性

ref标签属性

ref属性

ref: 与id 有略微差别，即：当作用在组件上时，ref获取组件实例对象，而id获取的是组件的template。

1.被用来给元素或子组件`注册引用`信息（id的替代者)
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式: 
	打标识:`<h1 ref="xxx">....</h1>`或`<School ref="xxx"></School>`获取:` this.$refs.xxx`

实例

<template>
    <div class="demo">
        <h3 v-text="msg" ref="title"></h3>
        <button @click="getDOM">点我获取上面标签</button>
        <School ref="sch"></School>
        <button @click="getSchoolComponent">点我获取上面组件实例对象</button>
    </div>
</template>

<script>
    import School from './components/School';
    export default {
        name:'App',
        components: {School},
        data() {
            return {
                msg:"v-text innerText"
            }
        },
        methods:{
            getDOM(){
                console.log(this.$refs.title)   // 当作用于html标签时，效果与id获取一样
            },
            getSchoolComponent(){
                console.log(this.$refs.sch)     // 当作用于组件标签时，获取组件实例对象
            }
        }
    }
</script>