正文

Vue中ref的作用，ref带:和不带:的区别

Async V管理员 /2024-11-23/467阅读/0评论

1123

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>