vue3之refs

最新推荐文章于 2024-08-04 11:10:34 发布

郑建零零发

最新推荐文章于 2024-08-04 11:10:34 发布

阅读量232

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_52421092/article/details/131078790

版权

该代码段展示了在Vue应用中如何使用ref和onMounted钩子函数。创建了两个ref变量hRef和dRef，分别绑定到模板的h1和Demo组件上，然后在组件挂载后打印h1元素的innerHTML和Demo组件实例。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <h1 ref="hRef">啊啊啊啊啊啊</h1>
        <Demo ref="dRef"/>
    </div>
</template>

<script>
import Demo from './Demo.vue'
import { ref, onMounted } from 'vue'
export default {
    components: {
        Demo,
    },
    setup() {
        // 创建一个空的ref
        const hRef = ref(null)
        const dRef = ref(null)
        
        onMounted(() => {
            console.log(hRef.value.innerHTML)
            cosnole.log(dRef.value)
        })
    }
}
</script>

总结：创建一个空的ref，并且把这个变量给到模板上的ref,使得他们之间产生联系，

关注博主即可阅读全文