Vue/React子组件实例暴露方法(TypeScript)
更新时间：2022年11月21日 10:59:58 作者：ZhuAiQuan
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等，记录一下Vue/React组件暴露出变量/函数的方法的写法，对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等；
记录一下Vue/React组件暴露出变量/函数的方法的写法；
Vue2
回顾一下Vue2 组件暴露出去方法，它并没有约束，写在methods里的方法都能被调用，data里的变量也能被接收；
现拉一个vue 2.6.10的模板下来
子组件的数据
父组件获取子组件实例，调用子组件方法等；
控制台输出：
这个输出的子组件实例里包含所有的变量和方法；
Vue3
组件通过vue3提供的defineExpose方法，把需要暴露出去的函数/变量放入到该方法里；
<script setup lang="ts">
import { defineExpose, ref } from 'vue';
...
// 举个例子
const name = ref('ikun');
function setName(name: string) {
name.value = name;
}
defineExpose({
name,
setName
})
</script>父组件
同样在子组件上声明一个ref对象接收这个子组件实例；为了能自动识别出暴露的方法，需要指定这个ref对象的类型；
此时可以在任意方法里访问这个子组件暴露出来的数据
<script setup lang="ts">
import { ref } from 'vue';
interface ChildInstance {
name: string
setName: (name: string) => void
}
const child = ref<ChildInstance >();
// 调用此方法即可改变子组件里的数据
function test() {
child.value?.setName('xxx')
console.log(child.value?.name)
}
</script>
<template>
...
<Child ref="child" />
</template>React
react函数式组件已经跟vue3差不多了，只不过是名字不一样而已；
在react中，通过useImperativeHandle这个hook+高阶组件formRef来暴露出组件的方法；
贴一下某个业务代码片段
子组件暴露出去的方法
这其中BasicImpHandle 就是暴露的方法类型接口；
父组件
render
Vue3和React获取的子组件实例不会像Vue2那样暴露全部的方法和数据了,只会暴露定义好的数据出来，感觉更安全吧；
就酱.
到此这篇关于Vue/React子组件实例暴露方法(TypeScript)的文章就介绍到这了,更多相关react组件暴露内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中子组件的显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue中使用echarts实现动态数据绑定以及获取后端接口数据
总结一下自己最近项目中用echarts动态获取接口数据并画图的方法,下面这篇文章主要给大家介绍了关于vue中使用echarts实现动态数据绑定以及获取后端接口数据的相关资料,需要的朋友可以参考下2022-07-07
本文主要介绍了vue实现接口封装的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了如何使用Vue和ElementPlus构建前端页面,特别是如何进行跨域请求和使用Vue Router进行路由管理,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
这篇文章主要介绍了Element中的Cascader（级联列表）动态加载省\市\区数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
点击弹窗其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。本文将利用openlayers实现这一效果，快跟随小编一起学习一下吧2022-06-06
这篇文章主要介绍了使用vuex较为优雅的实现一个购物车功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了Mock.js在Vue项目中的使用,在vue.config.js中配置devServer，在before属性中引入接口路由函数，详细步骤跟随小编通过本文学习吧2022-07-07
这篇文章主要给大家介绍了关于Vue中插槽slot的使用方法与应用场景的相关资料,插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了Vue中 axios delete请求参数操作，具有很好的参考价值，希望对大家有所 帮助。一起跟随小编过来看看吧2020-08-08
最新评论