Vue3 SFC and TSX methods call functions in subcomponents

In development, you will encounter such a requirement: get the reference of the subcomponent and call the method defined in the subcomponent. If a form component is encapsulated, the reference of this form component needs to be called in the parent component, and the validation form function or reset form function of this form component needs to be called. To achieve this function, first expose the function that the parent component needs to call in the child component, then go to the parent component to obtain the reference of the child component, and finally call the method exposed by the child component through the reference of the child component.

1 Subcomponent exposure method

1.1 SFC (.vue) exposure method

In the component defined by  .vue  , the defineExpose() method  is provided in  the setup  , which can expose the method inside the component to the parent component.

Create subcomponent  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) exposure method

 Components defined  using  the .tsx method are also  methods for exposing component content through the expose() method  in  the parameter context .

Create subcomponent  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 The parent component calls the method in the child component

2.1 SFC (.vue) call

To get a component reference in  a .vue  file, first define a  ref  variable, and then set  the ref  attribute for the child component. The ref  attribute value must be consistent with the variable name.

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>
    )
  }
})

As shown in the above code:  the ref  attribute value  of the first subcomponent is sfcRef , and the defined variable name is also  sfcRef . In the parent component, you can use  sfcRef to call the demoFun method  of the child component   .

2.2 TSX (.tsx) call

 It is easier to get the reference of the component in .tsx, first define a  ref  variable ,  and then set the variable to the  ref  attribute of the child component.

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>
      </>
    )
  }
})

Both achieve the same effect:

Thank you for reading this article. If this article gave you a little help or inspiration, please support it three times, like, follow, and bookmark. The author will continue to share more dry goods with you