Vue学习之ref属性

简介

主要讲解vue中的ref属性。

直接先说结论：

1. 专门被用来给html元素和子组件注册引用信息的（id属性的替代者）。
2. 该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。
3. 使用方式：
   打标志：<h1 ref=“xxx”>ref</h1> 或者 <School ref=“xxx”></School>
   获取：this.$refs.xxx

代码：

main.js：

//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'

// 关闭生产提示
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //这个目前还没学过，先知道他的作用是将app放入容器中。
  render: h => h(App),

  //配置该vue实例管理id为app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 编写结构 -->
    <div>

    <!-- 分别使用id和ref -->
    <h1 ref="h1d">ref属性学习</h1>
    <h2 id="h2d">ref属性学习</h2>
    <hr>
    <school ref="schRef"></school>
    <school id="schId"></school>
    <button @click="showDom">打印dom</button>
    </div>
</template>

<script>


//引入school组件
import school from "./components/School.vue"

export default {


    components:{
        //注册组件
        school
    },
    methods:{
        showDom(){
            //根据id进行打印
            console.log(document.getElementById("h2d"));
            console.log(document.getElementById("schId"));

            //根据ref属性进行获取
            console.log(this.$refs.h1d);
            console.log(this.$refs.schRef);

        }
    }
}
</script>

<style>

</style>

School.vue

<template>
    <!-- 编写组件结构代码，也就是html代码 -->
    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
    <div class="orange">
        <div>学校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
    </div>
</template>

<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
    data() {
        return {
        schoolName:"尚硅谷",
        schoolAddress:"北京"
        }
    },
}
</script>

<style>
    /* 编写样式的地方 */
    .orange{
        background-color: orange;
    }
</style>

效果：

由上面可以得出结论：

1. 当获取的是html元素时，ref和id的效果是一样的。
2. 当获取的是子组件元素时，ref获取的是组件实例vc，而id获取的却是组件根元素及其后代元素。