VUE3 ref 和 useTemplateRef

HarryHY2025-06-10 18:00

使用ref来绑定和获取

页面

javascript 复制代码

        <headerNav ref="headerNavRef"></headerNav>
        <div @click="showRef" ref="buttonRef">refbutton</div>

使用ref方法const后面的命名需要跟页面的ref值一样

javascript 复制代码

const buttonRef = ref('buttonRef')
const headerNavRef = ref('headerNavRef')
const showRef = () => {
    console.log(buttonRef.value,headerNavRef.value);
}

vue3.5 使用useTemplateRef 推荐

javascript 复制代码

const bRef = useTemplateRef('buttonRef')
const href = useTemplateRef('headerNavRef')
const showRef = () => {
    console.log(href.value,bRef.value);
}

当父组件想要通过 ref 获取自组件里面的内容需要自组件主动暴露出去 ------defineExpose

javascript 复制代码

/**
 * defineExpose({xxxx,xxxx})
 */
defineExpose({
    navActive
})

如果你的vue不是3.5则需要更新vue的版本可以去看另外一个文章
检查项目中的依赖是否有更新------npm outdated