首页IT科技vue子组件获取父组件属性(Vue3/ 父组件 ref 获取子组件内属性或方法 子组件 defineExpose 暴露方法 或 属性 总结、)

vue子组件获取父组件属性(Vue3/ 父组件 ref 获取子组件内属性或方法 子组件 defineExpose 暴露方法 或 属性 总结、)

时间2025-05-05 00:04:00分类IT科技浏览3963
导读:一 .父组件 ref 获取子组件内属性或方法 总结...

一 .父组件 ref 获取子组件内属性或方法  总结

介绍: 

Vue3中 父组件拿到 子组件内方法 属性  可以通过 ref , 但是将 ref 插入子组件标签身上后 打印出来是 什么都没有的 是空的          ,这个是为什么呢? 哦 原来 Vue3严格性问题                ,属性或方法不会像Vue2那样ref后全部暴露      , 需要使用  defineExpose 手动暴露           , defineExpose 内被暴露的 属性 方法                 , ref后就可以获取      ,所以Vue3内 想要ref获取 子组件内 方法 属性 就 defineExpose 给他暴露出来!  ok? 

文字实现流程:

1.在子组件内 defineExpose 暴露需要被父组件调用的属性 

2. 子组件内定义类型

3. 父组件 ref 插入到 子组件标签身上 获取 打印出来 浏览器控制台查看

实现流程:

1. 首先子组件 defineExpose  暴露 需要被父组件调用的属性 或 方法

defineExpose({

    属性

})

2. 然后父组件内引入 ref      , 并给 ref 挂值 为 null ,

import { ref } from vue;

const  变量名  = ref(null)

3. 给子组件绑定 ref 并 绑定 值为null的变量名                ,然后 变量名.value.子组件内属性 获取 打印出来 浏览器控制台查看

<子组件 ref="变量名"> </子组件>

变量名.value.子组件内属性 

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
帝国cms到底好不好(【使用说明】帝国cms万能通用api二次开发核心包)