VUE3 ref 和 useTemplateRef

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

相关推荐
SchuylerEX1 分钟前
第六章 JavaScript 互操(3)JS调用.NET
前端·javascript·c#·.net·blazor
默默地离开3 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man5 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭6 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix7 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏8 分钟前
前端之Git
前端·git
二闹23 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录28 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙30 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js
一念杂记30 分钟前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序