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

一 .父组件 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.子组件内属性 


 

### Vue3 中通过 `defineExpose` 实现父组件子组件暴露方法Vue3 的 Composition API 中,`defineExpose` 是一个重要的工具,用于显式声明哪些属性方法可以从外部访问。虽然其主要用途是子组件向外暴露接口以便父组件调用,但在某些场景下也可以反向操作——即 **父组件通过特定方式间接实现向子组件暴露方法**。 以下是具体实现的方式: #### 方法一:利用事件监听器传递回调函数 可以通过 Props 和 Emit 结合的方式来完成这一需求。父组件定义好需要暴露方法并通过 Prop 将该方法传入子组件,在子组件中可以直接调用此方法。 ```javascript // 父组件 ParentComponent.vue <script setup> import { ref } from &#39;vue&#39;; const parentMethod = () => { console.log(&#39;This is a method exposed by the parent component&#39;); }; </script> <template> <ChildComponent :parent-method="parentMethod" /> </template> ``` ```javascript // 子组件 ChildComponent.vue <script setup> defineProps({ parentMethod: Function, }); </script> <template> <button @click="parentMethod">Call Parent Method</button> </template> ``` 这种方法简单明了,并不需要额外引入复杂的逻辑即可达成目标[^1]。 #### 方法二:借助 Provide/Inject 进行跨层通信 如果父子关系较为复杂者存在多级嵌套,则推荐使用提供者模式 (Provide / Inject),这种方式允许更灵活的数据流动方向而不局限于单一层级间通讯。 ```javascript // 父组件 ParentComponent.vue <script setup> import { provide, reactive } from &#39;vue&#39;; const state = reactive({ count: 0 }); function incrementCount() { state.count++; } provide(&#39;sharedState&#39;, { ...state, incrementCount }); // 向后代节点共享数据与行为 </script> <template> <div>Parent Count: {{ state.count }}</div> <ChildComponent /> </template> ``` ```javascript // 子组件 ChildComponent.vue <script setup> import { inject } from &#39;vue&#39;; const sharedState = inject(&#39;sharedState&#39;); // 获取来自祖先节点的内容 if (!sharedState || typeof sharedState.incrementCount !== &#39;function&#39;) throw new Error(); console.log(sharedState); </script> <template> <button @click="sharedState.incrementCount()">Increment Parent Counter</button> </template> ``` 这里展示了另一种可能的选择方案,适用于更加动态化的应用场景[^2]。 需要注意的是,无论是哪种途径都应遵循最小权限原则只开放必要的功能点以保障系统的安全性及稳定性[^3]。 --- ### 总结 尽管官方文档并未直接提及关于 “父 -> 子” 类型的 expose 流程说明,但从实际开发经验来看上述两种做法均能有效解决此类问题。其中第一种更适合简单的上下文环境下的交互处理;第二种则适合于较深层次结构中的依赖注入场合[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值