1 简介

　　在js中，我们获取一个元素可以通过document.getElementById()去获取，在vue中，使用了ref属性来替代id，通过ref属性可以获取html元素以及vue组件实例对象

　　它被用来给元素或子组件注册引用信息（ID的替代者）

　　该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）

2 使用方式

　　在标签添加ref属性即可

<h1 ref=“xxx”>ref</h1> 

<School ref=“xxx”></School>

　　通过组件实例的$ref属性可以获取

this.$refs.xxx

3 示例

1）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')

2) 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>

3) 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>

4) html.index

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

5) 效果

两者获取html标签，获取到的都是html元素，通过原生js去获取组件标签，获取到的是组件最后在页面上的元素，而ref获取到的是组件实例对象。

巴特西

Vue23 ref属性

1 简介

2 使用方式

3 示例

最新文章

热门文章