文章目录
一、ref属性的作用
ref 用来给元素或子组件注册引用信息 (id的替代者)
应用在html标签上获取的是真实DOM
应用在组件标签上是组件实例对象
二、使用
<template>
<div id="app">
<h2 ref="h2">我是h2标签</h2>
<button @click="btnClick">点我显示标签</button>
<Home ref="home" />
</div>
</template>
<script>
import Home from './components/Home'
export default {
name: 'App',
components: {
Home
},
methods: {
btnClick(){
console.log(this.$refs.h2); //获取的是真实的dom元素
console.log(this.$refs.home); //获取的是home组件实例对象
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>