How to use Vue3 SFC and TSX to call functions in subcomponents

In development, you will encounter such a requirement: obtain the reference of the subcomponent and call the method defined in the subcomponent. If a form component is encapsulated, you need to call the reference of this form component in the parent component, and call the verification form function or reset form function of this form component. To implement this function, first expose the functions 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 components defined using .vue, the defineExpose() method is provided in setup. Methods can expose methods inside a component to parent components.

Create sub-component demo-component-sfc.vue:

<template>
  <el-button type="primary" @click="demoFun(&#39;child&#39;)">demo component sfc</el-button>
</template>

<script lang="ts" setup name="demo-component-sfc">
const demoFun = (str: string) => {
  console.log(&#39;demo component sfc&#39;, str)
}
// 使用 defineExpose 暴露组件内部的方法
defineExpose({ demoFun })
</script>

1.2 TSX (.tsx) exposure method

Components defined using .tsx method are also passed through the parameter context The expose() method in exposes the content of the component.

Create sub-component 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(&#39;child&#39;)}>demo component tsx</el-button>
    )
  }
})

2 The parent component calls the method in the sub-component

2.1 SFC (.vue) call

To obtain the component reference in the .vue file, first define a ref variable, and then set the ref attribute for the sub-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(&#39;child&#39;)}>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 obtain the reference of the component in .tsx. First define a ref variable, and then set the variable to the ref attribute of the subcomponent.

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 >
          <DemoComponentTsx ref={tsxRef} />
          <el-button onClick={onBtnClick2}>parent button</el-button>
        </div>
      </>
    )
  }
})

The two achieve the same effect:

The above is the detailed content of How to use Vue3 SFC and TSX to call functions in subcomponents. For more information, please follow other related articles on the PHP Chinese website!