這篇文章主要介紹“Vue3中怎么使用SFC和TSX調(diào)用子組件的函數(shù)”，在日常操作中，相信很多人在Vue3中怎么使用SFC和TSX調(diào)用子組件的函數(shù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中怎么使用SFC和TSX調(diào)用子組件的函數(shù)”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)公司是一家企業(yè)級云計算解決方案提供商,超15年IDC數(shù)據(jù)中心運營經(jīng)驗。主營GPU顯卡服務器，站群服務器，成都聯(lián)通服務器托管，海外高防服務器，大帶寬服務器，動態(tài)撥號VPS，海外云手機，海外云服務器，海外服務器租用托管等。

1 子組件暴露方法

1.1 SFC（.vue）暴露方法

在使用 .vue 定義的組件中，setup 中提供了 defineExpose() 方法，該方法可以將組件內(nèi)部的方法暴露給父組件。

創(chuàng)建子組件 demo-component-sfc.vue：

const demoFun = (str: string) => {
  console.log('demo component sfc', str)
}
// 使用 defineExpose 暴露組件內(nèi)部的方法
defineExpose({ demoFun })

1.2 TSX（.tsx）暴露方法

使用 .tsx 方式定義的組件，也是通過參數(shù) context 中的 expose() 方法暴露組件內(nèi)容的方法。

創(chuàng)建子組件 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 暴露組件內(nèi)部的方法
    context.expose({ demoFun })

    return () => (
       demoFun('child')}>demo component tsx
    )
  }
})

2 父組件調(diào)用子組件中的方法

2.1 SFC（.vue）調(diào)用

在 .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 暴露組件內(nèi)部的方法
    context.expose({ demoFun })

    return () => (
       demoFun('child')}>demo component tsx
    )
  }
})

如上面的代碼所示：第一個子組件的 ref 屬性值為 sfcRef，定義的變量名也是 sfcRef。在父組件中便可以使用 sfcRef 調(diào)用子組件的 demoFun 方法了。

2.2 TSX（.tsx）調(diào)用

在 .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 () => (
      <>
        

          
          parent button
        

        
          
          parent button