Skip to content

Vue3 setup使用模板引用$refs

在Vue2中,我们通常这么做实现一个模板引用:

<template>
  <input ref="input" />
</template>

<script>
export default {
  data() {},
  methods: {
    focusInput() {
      this.$refs.input.focus();
    }
  },
  mounted() {
    this.focusInput();
  }
}
</script>

官方文档:https://v3.cn.vuejs.org/guide/component-template-refs.html

在 Vue3 中使用组合式API,官方在 setup() API 中解释说:

在 setup() 内部,this 不是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆。

所以我们没有办法通过 this.$refs 获取模板引用。那应该怎么办呢?

在 Vue3 依旧可以在组件实例上找到 $refs

import { getCurrentInstance } from 'vue';

// 获取当前组件实例
const vm = getCurrentInstance();
// 找到 $refs
setTimeout(() => {
  console.log(vm.ctx.$refs);
}, 0);

注意!

因为 setup() 运行时,组件并未初始化完成,所以 $refs 是空的。所以上面代码将放在了延后执行的 setTimeout 中。

领支付宝红包:打开支付宝搜索 726845401

领饿了么红包:0fυィ直文本 e:/$XGzEgR8$~.👉饿了么App👈【快來領外賣紅包,最高20元,人人都有哦~】

 

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

发表评论

Your email is never published nor shared. Required fields are marked *


TOP