Vue3 Refs模板

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

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

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

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

 

src\views\HomeView.vue

<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

<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>