vue3使用ref（script: setup+ts)

最新推荐文章于 2024-07-04 10:54:38 发布

王哈哈的学习笔记

最新推荐文章于 2024-07-04 10:54:38 发布

阅读量185

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58031521/article/details/130307096

版权

在Vue2中，父组件可以通过`this.$refs`直接调用子组件的方法，但在Vue3中，需要子组件使用`defineExpose`来暴露需要访问的函数。父组件则需通过`ref`获取子组件实例并在`onMounted`钩子中调用相应方法。

摘要由CSDN通过智能技术生成

在vue2中想要调用子组件里的方法直接使用this.$ref.OrderListRef.getList()这种方式即可，在vue3中有几个点需要注意：

1. 子组件需要暴露对外公开的变量（defineExpose）

<script lang="ts" setup>
    import { defineComponent, reactive, toRefs,onMounted,getCurrentInstance, ref, watch } from 'vue';
    const getList = (listSearchInfo)=> {
        
    }
    defineExpose({
        getList
    })
</script>

2. 父组件使用：

<template>
	<OrderList ref="OrderListRef"></OrderList>
</template>
<script lang="ts" setup>
    import { defineComponent, reactive, toRefs,onMounted,getCurrentInstance, ref, watch } from 'vue';
    import OrderList from "./components/OrderList.vue";
    const OrderListRef = ref(); // 获取
    onMounted(()=>{
      	OrderListRef.value.getList() //使用
    })
</script>