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组件暴露内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
关于element ui中的el-scrollbar横向滚动问题
这篇文章主要介绍了关于element ui中的el-scrollbar横向滚动问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下2022-03-03
在移动端或PC,页面的部分内容常常需要我们让其在页面滚动,这篇文章主要给大家介绍了关于vue.js滚动条插件vue-scroll的基本用法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue项目中使用多选框的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
vue中使用gantt-elastic实现可拖拽甘特图的示例代码
这篇文章主要介绍了vue中使用gantt-elastic实现可拖拽甘特图,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
本篇文章给大家介绍了vue项目中API接口管理的相关知识点，以及相关JS代码分析，有兴趣的朋友参考下。2018-04-04
这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
Vue-loader其实就是一个webpack的loader，用来把vue组件转换成可部署的js, html, css模块，这篇文章主要介绍了Vue-loader使用教程,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了使用echarts点击按钮从新渲染图表并更新数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇vue-dplayer 视频播放器实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论