ref的主要作用
1.用于获取DOM元素
2.获取子组件实例
以上仅适用于Vue2
ref带:和不带:的区别
1.带: (静态绑定)
解释:静态绑定 意味着它在模板编译阶段就已经确定好了要绑定的引用名称,不会随着组件数据或状态的变化而改变。
<template>
<div>
<input ref="myInput" />
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myInput);
}
}
</script>
不带: (动态绑定)
解释:动态绑定 其绑定的引用名称可以随着组件的数据变化而动态改变,并且会根据新的值重新进行相应的绑定操作。
<template>
<div>
<input :ref="inputRef" />
</div>
</template>
<script>
export default {
data() {
return {
inputRef: 'myInput'
};
},
mounted() {
console.log(this.$refs.myInput);
},
beforeUpdate() {
// 假设在组件更新前改变inputRef的值
this.inputRef = 'newInputRef';
}
}
</script>





还没有评论,来说两句吧...