詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)

更新時(shí)間：2022年10月20日 16:52:53 作者：程序員優(yōu)雅哥（\/同）

在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下

在開(kāi)發(fā)中會(huì)遇到這樣的需求：獲取子組件的引用，并調(diào)用子組件中定義的方法。如封裝了一個(gè)表單組件，在父組件中需要調(diào)用這個(gè)表單組件的引用，并調(diào)用這個(gè)表單組件的校驗(yàn)表單函數(shù)或重置表單函數(shù)。要實(shí)現(xiàn)這個(gè)功能，首先要在子組件中暴露父組件需要調(diào)用的函數(shù)，然后去父組件中獲取子組件的引用，最后通過(guò)子組件的引用調(diào)用子組件暴露的方法。

1 子組件暴露方法

1.1 SFC（.vue）暴露方法

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

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

1.2 TSX（.tsx）暴露方法

使用 .tsx 方式定義的組件，也是通過(guò)參數(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 () => (
      <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>
    )
  }
})

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

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

在 .vue 文件中獲取組件引用首先定義一個(gè) ref 變量，然后為子組件設(shè)置 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 () => (
      <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>
    )
  }
})

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

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

在 .tsx 中獲取組件的引用更簡(jiǎn)單，首先定義一個(gè) ref 變量，然后將該變量設(shè)置給子組件的 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>
      </>
    )
  }
})

兩者實(shí)現(xiàn)效果一致：

到此這篇關(guān)于Vue3 SFC 和 TSX 方式調(diào)用子組件中的函數(shù)的文章就介紹到這了,更多相關(guān)Vue調(diào)用子組件中的函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: