ref属性
之前学过一个 key 的属性，是Vue里的关键词，这次引入 ref 属性；
看个需求：点击按钮输出 h1 这个DOM元素；
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<h1 v-text="msg" id="title"></h1>
<button @click="showDOM">点我输入h1的DOM</button>
<school/>
</div>
</template>
<script>
// 引入组件
import school from './components/school.vue'
export default {
name:'app',
components:{
school,
},
data(){
return{
msg:'欢迎学习Vue!'
}
},
methods:{
showDOM(){
console.log('@@@',document.getElementById('title'));
}
}
}
</script>
这个是 App.vue 的组件页面，只引入了一个模板；
需求是输出 h1 元素，代码使用了原生JS里的 getElementById('title')，其实也没问题，但是看着就很怪。
在Vue中，使用了一个新关键字来代替 id ， 叫 ref ，使用起来更方便；
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM">点我输入h1的DOM</button>
<school/>
</div>
</template>
<script>
// 引入组件
import school from './components/school.vue'
export default {
name:'app',
components:{
school,
},
data(){
return{
msg:'欢迎学习Vue!'
}
},
methods:{
showDOM(){
console.log('@@@',this.$refs.title);
}
}
}
</script>
提示，代码只改了两处：
1），在 h1 标签上加了 ref="title" ;
2），调用 ref 时，使用 Vue 自身体的 .$refs 方法；
可以把几个标签上都定义 refs ，再看看 VC 实例上的显示；
<template>
<div>
<img src="./assets/logo.png" alt="logo" ref="logo">
<h1 v-text="msg" ref="title" id="title"></h1>
<button @click="showDOM" ref="btn">点我输入h1的DOM</button>
<school ref="sch"/>
</div>
</template>
<script>
// 引入组件
import school from './components/school.vue'
export default {
name:'app',
components:{
school,
},
data(){
return{
msg:'欢迎学习Vue!'
}
},
methods:{
showDOM(){
console.log('@@@',this,this.$refs);
}
}
}
</script>
提示：给img,h1,btutton，还有组件 school 上都绑定了 ref；
给哪元素加上 ref ，VC就会替我们收集这些 ref 的元素；
看效果：
调用的时候只需要：
this.$refs.title // 真实DOM元素
this.$refs.logo // 真实DOM元素
this.$refs.btn // 真实DOM元素
this.$refs.sch // school 组件的实例对象(vc)
这样就可以完整的输出几个被定义了 refs 的元素；
注意：this.$refs.sch 是 school 组件，返回的就是 school 组件的 VC 实例；
在原生JS中，选择DOM使用id；在VUE中，选择 DOM 使用 ref；
给标签元素加上 ref 和加上 id 看起来差异不大，但是给 组件加上 ref 和 id 的效果可就不一样了；
<school ref="sch" id ="sch"/>
给 school 分别打上 ref 和 id 的属性，再输出结果看一下：
console.log('@@@',this.$refs.sch);
console.log('@@@',document.getElementById('sch'));
使用 id 拿到的元素是 school 组件里的 html ；
ref属性总结
1）被用来给元\素或子组件注册引用信息(id的替代者)；
2）应用在html标签上获得的是真实DOM元素，应用在组件标签上是组件实例对象（VC）
3）使用方式
1、打标识：<h1 ref="xxx">...</h1> 或 <school ref="xxx">...</school>
2、获取： this.$refs.xxx ;
