Vue3+TS如何优雅的获取子组件的数据(勿喷!!)

107 阅读1分钟

普通的vue3用法

我们在平时的开发中难免会遇到获取子组件数据的场景,这些都是司空见惯的事情了。在vue2中获取子组件数据的方式很简单,只要能拿到组件实例就可以获取里面的任意属性,vue3中我们要在子组件中使用defineExpose将需要暴露的函数或者数据等暴露出去父组件就可以通过组件实例获取到:

// 子组件Child
defineExpose({
 name: 'xiaosong',
 fun: () => {console.log(hello)}
});
// 父组件
const childRef = ref(null)
console.log(childRef.value.name) // xiaosong
childRef.value.fun() // hello

以上代码是简单举例,使用JavaScript获取子组件的数据或函数的时候没有提示,不知道子组件中有没有也不知道写没写错,只能在运行的时候才能发现问题。

TS+vue3

这里我接受使用TS的写法,其实子组件的写法不变改变的是父组件的写法:

 // 子组件Child
defineExpose({
 name: 'xiaosong',
 fun: () => {console.log(hello)}
});

父组件中使用了一个工具InstanceType,这是TypeScript 内置的工具类型来获取其实例类型。 这里在一次获取子组件中的数据时就会有提示了。

// 父组件
const childRef = ref<InstanceType<typeof childRef> | null>(null);
console.log(childRef.value.name) // xiaosong
childRef.value.fun() // hello