ref属性
- 被用来给元素或子组件注册引用信息(id的替代者)。
- 应用在html标签上获取的是真实的DOM,应用在组件标签上是组件实例对象(vc)。
- 使用方法
- 打表示<h1 ref = 'xxx'>...</h1> 或者 <School ref = 'xxx'>...</School>
- 获取:this.$refs.xxx
通过给DOM元素添加id来获取元素对应的内容
<template>
<div>
<h1 id="xin">lakldsjfldsjflkjsd</h1>
<button @click="btnClick">点我获取元素xin</button>
</div>
</template>
<script>
export default {
name: "App",
methods:{
btnClick(){
console.log(document.getElementById("xin"));
}
}
}
</script>
通过给DOM元素添加ref属性来获取元素对应的内容
<template>
<div>
<h1 ref="xin">lakldsjfldsjflkjsd</h1>
<button @click="btnClick">点我获取元素xin</button>
</div>
</template>
<script>
export default {
name: "App",
methods:{
btnClick(){
console.log(this.$refs.xin);
}
}
}
</script>
通过给组件添加ref属性来获取元素对应的内容
<template>
<div>
<Student ref="xin"></Student>
<button @click="btnClick">点我获取元素xin</button>
</div>
</template>
<script>
import Student from "./components/Student"
export default {
name: "App",
data(){
return {
name:"李义新",
sex:"男"
}
},
components:{
Student
},
methods:{
btnClick(){
console.log(this.$refs.xin)
}
}
}
</script>