Vue ref 属性
作用:用来给元素或子组件注册引用信息(id 的替代)
应用在 html 标签上获取的是真实 DOM 元素,应用在w组件标签上是组件实例对象
标识:<h1 ref='xxx'></h1>
或 <School ref='xxx'>
获取:this.$refs.xxx
示例
<template>
<div id="app">
<h2 v-text="msg" ref="hello"></h2>
<School ref="sch"/>
<button @click="showDOM">点我输出</button>
</div>
</template>
<script>
import School from "@/components/School";
export default {
name: 'App',
components: {
School
},
data() {
return {
msg: '你好'
}
},
methods: {
showDOM() {
console.log(this.$refs.hello) // 真实 DOM 元素
console.log(this.$refs.sch) // School 组件的实例对象
}
}
}
</script>