vue3怎么用ref-前端问答-PHP中文网

vue3怎么用ref

betcha

发布： 2024-08-20 08:58:17

原创

589人浏览过

Vue.js 3 中 ref 可通过两种方式使用：1. template ref 2. JavaScript ref。对于 template ref，可使用 this.$refs 访问，对于 JavaScript ref，可使用 unref() 解引用。ref 可用于访问 DOM 元素、组件实例和监听 DOM 事件。但注意 ref 的值是不可变的，首次访问时为 null，需使用 unref() 函数解引用 JavaScript ref 以获取实际 DOM 元素或组件实例。

vue3怎么用ref

Vue.js 3 中使用 ref

ref 是 Vue.js 中一项强大的工具，可用于获取组件或 HTML 元素的引用。在 Vue.js 3 中，ref 的用法与之前版本略有不同。

语法

在 Vue.js 3 中，ref 可通过两种方式使用：

1. template ref

<code class="html"><template>
  <input ref="myInput" />
</template></code>

登录后复制

2. JavaScript ref

立即学习“前端免费学习笔记（深入）”；

<code class="js">export default {
  setup() {
    const myInputRef = ref(null);
    return { myInputRef };
  },
};</code>

登录后复制

获取 ref 值

对于 template ref，可以使用 this.$refs 访问：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<code class="js">const myInputElement = this.$refs.myInput;</code>

登录后复制

对于 JavaScript ref，可以使用 unref() 函数解引用：

<code class="js">const myInputElement = unref(myInputRef);</code>

登录后复制

用例

ref 可用于各种场景：

1. 访问 DOM 元素

<code class="js">const myInputElement = this.$refs.myInput;
myInputElement.focus();</code>

登录后复制

2. 访问组件实例

<code class="js">const myChildComponent = this.$refs.myChildComponent;
myChildComponent.doSomething();</code>

登录后复制

3. 监听 DOM 事件

<code class="js">const myInputRef = ref(null);
watch(myInputRef, (newValue, oldValue) => {
  if (newValue.value !== '') {
    // do something
  }
});</code>

登录后复制