Vue3 Refs模板

Refs模板用来获取页面DOM元素或者组件，类似于Vue2.X中的$refs。Refs模板的使用方法如下。

(1)在setup()中创建ref对象，其值为null。

(2)为元素添加ref属性，其值为步骤(1)中创建的ref对象名。

(3)完成页面渲染之后，获取DOM元素或者组件。

 

src\views\HomeView.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<template>     <div class="home">         <h1 ref="msg2">Hello Vue3</h1>         <ComRef ref="msg3"></ComRef>     </div> </template>   <script setup>     import HelloWorld from '@/components/HelloWorld.vue'     import ComRef from '@/components/ComRef.vue'     import {ref, onMounted} from 'vue'         var msg2 = ref(null);     var msg3 = ref(null);     onMounted(() => {         console.log(msg2.value) // msg2.value获取到的就是h1标签         msg2.value.style.color = 'grey'           console.log(msg3.value)         console.log(msg3.value.msg)         msg3.value.btn()     })   </script>

src\components\ComRef.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template>     <span>         <p>ComRef.vue: {{msg}}</p>     </span> </template>   <script setup>     import {ref} from "vue"       var msg = ref("Hello Refs")       var btn = () => {         console.log("btn:" + msg.value)     }       defineExpose({         msg,         btn     })   </script>