Vue3 SFC 和 TSX 方式调用子组件中的函数

  • Vue3 SFC 和 TSX 方式调用子组件中的函数已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

在开发中会遇到这样的需求:获取子组件的引用,并调用子组件中定义的方法。如封装了一个表单组件,在父组件中需要调用这个表单组件的引用,并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能,首先要在子组件中暴露父组件需要调用的函数,然后去父组件中获取子组件的引用,最后通过子组件的引用调用子组件暴露的方法。

在开发中会遇到这样的需求:获取子组件的引用,并调用子组件中定义的方法。如封装了一个表单组件,在父组件中需要调用这个表单组件的引用,并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能,首先要在子组件中暴露父组件需要调用的函数,然后去父组件中获取子组件的引用,最后通过子组件的引用调用子组件暴露的方法。

1 子组件暴露方法

1.1 SFC(.vue)暴露方法

在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件。

创建子组件 demo-component-sfc.vue

<template>   <el-button type="primary" @click="demoFun('child')">demo component sfc</el-button> </template>  <script lang="ts" setup name="demo-component-sfc"> const demoFun = (str: string) => {   console.log('demo component sfc', str) } // 使用 defineExpose 暴露组件内部的方法 defineExpose({ demoFun }) </script> 

1.2 TSX(.tsx)暴露方法

使用 .tsx 方式定义的组件,也是通过参数 context 中的 expose() 方法暴露组件内容的方法。

创建子组件 demo-component-tsx.tsx

import { defineComponent } from 'vue'  export default defineComponent({   name: 'demo-component-tsx',   setup (props, context) {     const demoFun = (str: string) => {       console.log('demo component tsx', str)     }      // 使用 expose 暴露组件内部的方法     context.expose({ demoFun })      return () => (       <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>     )   } }) 

2 父组件调用子组件中的方法

2.1 SFC(.vue)调用

.vue 文件中获取组件引用首先定义一个 ref 变量,然后为子组件设置 ref 属性。ref 属性值与变量名要保持一致。

import { defineComponent } from 'vue'  export default defineComponent({   name: 'demo-component-tsx',   setup (props, context) {     const demoFun = (str: string) => {       console.log('demo component tsx', str)     }      // 使用 expose 暴露组件内部的方法     context.expose({ demoFun })      return () => (       <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>     )   } }) 

如上面的代码所示:第一个子组件的 ref 属性值为 sfcRef,定义的变量名也是 sfcRef。在父组件中便可以使用 sfcRef 调用子组件的 demoFun 方法了。

2.2 TSX(.tsx)调用

.tsx 中获取组件的引用更简单,首先定义一个 ref 变量,然后将该变量设置给子组件的 ref 属性即可。

import { defineComponent, ref } from 'vue' import DemoComponentSfc from '@/components/ref/demo-component-sfc.vue' import DemoComponentTsx from '@/components/ref/demo-component-tsx'  export default defineComponent({   name: 'demo-ref-tsx',   setup () {     const sfcRef = ref()      const onBtnClick1 = () => {       if (sfcRef.value) {         sfcRef.value && sfcRef.value.demoFun('parent')       }     }      const tsxRef = ref()      const onBtnClick2 = () => {       if (tsxRef.value) {         tsxRef.value && tsxRef.value.demoFun('parent')       }     }     return () => (       <>         <div>           <DemoComponentSfc ref={sfcRef} />           <el-button onClick={onBtnClick1}>parent button</el-button>         </div>          <div style="margin-top: 10px;">           <DemoComponentTsx ref={tsxRef} />           <el-button onClick={onBtnClick2}>parent button</el-button>         </div>       </>     )   } }) 

两者实现效果一致:

Vue3 SFC 和 TSX 方式调用子组件中的函数

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货