VUE3获取子组件的方法,变量

VUE3获取子组件内方法和变量

1,ref获取

父组件

<child ref="child" />
----------------------
//省略代码
const child=ref(null)
console.log(child.value)  //{}
很明显,vue3现在不能使用以前的ref来或者子组件实例了,但是vue3现在提供了一个expose函数

expose

child.vue
----------------------
//js部分
<script lang="ts" setup>
  import { useContext } from 'vue';
  const { expose } =useContext()
  const fn=()=>{'这是子组件的方法'}
  expose({
    fn
  })
</script>
parent.vue
-----------------------
<child ref="child" />
----------------------
//省略代码
const child=ref(null)
console.log(child.value)  //{fn} 这样就拿到子组件传过来的函数
Vue 3中,获取组件方法有几种不同的方式。首先,我们可以使用`ref`和`$refs`来获取组件。 第一种方法是通过在父组件中使用`ref`将组件实例赋值给一个变量。然后,我们可以通过这个变量来调用组件方法。比如,在父组件中定义一个`ref`变量,如`const myRefs = ref();`,然后在组件上使用`ref="myRefs"`来绑定这个变量。接着,在父组件方法中,我们可以通过`myRefs.value`来访问组件实例,并调用组件方法。例如,`myRefs.value.change()`可以调用组件的`change`方法。同时,我们也可以通过`myRefs.value`来获取组件暴露出来的其他数据。比如,`myRefs.value.age`可以获取组件的`age`属性的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue3.0 父组件调用组件方法获取组件的值](https://blog.csdn.net/weixin_44132285/article/details/126517620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue3获取组件实例](https://blog.csdn.net/m0_59338367/article/details/128293309)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值