在Vue中我们不需要获取dom节点,只要给元素绑定ref就可以获取(this.$refs.refName)
ref的使用
ref一般用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $
refs对象上。在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例
<p ref="xi">Hello</p>
<children ref="children"></children>
调用
this.$ref.xi. this.$ref.children
示例:
这是子组件
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
msg: '子组件'
}
},
methods: {
change() {
this.msg = '码农的美好一天'
}
}
}
</script>
这是父组件
<template>
<div @click="childrenClick">
<children ref="children"></children>
</div>
</template>
<script>
//引入子组件
import children from 'components/children.vue'
export default {
data() {
},
methods: {
childrenClick() {
this.$refs.children //返回一个对象
this.$refs.children.change() // 调用children的change方法
}
},
components: {
children
},
}
</script>
这就是ref的简单使用,ref减少获取dom节点的消耗。