[vue3 + TS] 父组件调用子组件的多种方法

主要用 ref<InstanceType<typeof 组件>>() 来获取各个子组件实例

父组件
<Footer ref="footerRef" />

setup() {
	/**footerRef 一定要和上面标签上ref后面的一致，不然拿到的是空的，很重要！很重要！*/
    const footerRef = ref<InstanceType<typeof Footer>>() 
    const parentClick = () => {
    /**调用子组件的方法，不报错也可以不用问号，可以传参 */
      footerRef.value?.handleFn('111')
      // 改变子组件的值
      // footerRef.value!.msg = '你好，我的世界！'   // !为断言，防止为空报错
    }
    return {
		parentClick,
		footerRef //ref一定要return出去
	}
 }
 components: {Footer}

子组件

setup() {
	const handleFn = (str: string) => {
      console.log(`父组件调用子组件方法-${str}`);
	}
	return {
		handleFn
	}
}

注意点:

• 1. const footerRef = ref<InstanceType<typeof 组件>>()
     使用这种方式后,在项目build时不会报警告
• 2. const footerRef = ref<null | HTMLElement>(null)
     在项目build时会报警告

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用