怎麼使用Vue3 SFC和TSX方式呼叫子元件中的函數

在開發中會遇到這樣的需求：取得子元件的引用，並呼叫子元件中定義的方法。如封裝了一個表單元件，在父元件中需要呼叫這個表單元件的引用，並呼叫這個表單元件的校驗表單函數或重設表單函數。要實現這個功能，首先要在子元件中暴露父元件需要呼叫的函數，然後去父元件中取得子元件的引用，最後透過子元件的引用呼叫子元件暴露的方法。

1 子元件暴露方法

1.1 SFC（.vue）暴露方法

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

建立子元件 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）暴露方法

使用 .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(&#39;child&#39;)}>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(&#39;child&#39;)}>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 >
          <DemoComponentTsx ref={tsxRef} />
          <el-button onClick={onBtnClick2}>parent button</el-button>
        </div>
      </>
    )
  }
})

兩者實作效果一致：

以上是怎麼使用Vue3 SFC和TSX方式呼叫子元件中的函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！