So verwenden Sie Vue3 SFC und TSX zum Aufrufen von Funktionen in Unterkomponenten

In der Entwicklung werden Sie auf eine solche Anforderung stoßen: Rufen Sie die Referenz einer Unterkomponente ab und rufen Sie die in der Unterkomponente definierte Methode auf. Wenn eine Formularkomponente gekapselt ist, müssen Sie die Referenz dieser Formularkomponente in der übergeordneten Komponente aufrufen und die Überprüfungsformularfunktion oder die Formularfunktion zum Zurücksetzen dieser Formularkomponente aufrufen. Um diese Funktion zu implementieren, legen Sie zunächst die Funktionen offen, die die übergeordnete Komponente in der untergeordneten Komponente aufrufen muss, gehen Sie dann zur übergeordneten Komponente, um die Referenz der untergeordneten Komponente abzurufen, und rufen Sie schließlich die von der untergeordneten Komponente bereitgestellte Methode über die Referenz auf die untergeordnete Komponente.

1 Unterkomponenten-Belichtungsmethode

1.1 SFC (.vue)-Belichtungsmethode

In mit .vue definierten Komponenten stellt das Setup die Methode defineExpose() bereit, mit der die internen Methoden der Komponente der übergeordneten Komponente zugänglich gemacht werden können.

Unterkomponente demo-component-sfc.vue erstellen:

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

Mit der .tsx-Methode definierte Komponenten sind auch Methoden zum Offenlegen von Komponenteninhalten über die Exposure()-Methode im Parameterkontext .

Erstellen Sie die Unterkomponente 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 Die übergeordnete Komponente ruft die Methode in der Unterkomponente auf

2.1 SFC (.vue)-Aufruf

Holen Sie sich die Komponentenreferenz in der .vue-Datei Definieren Sie zunächst eine Ref-Variable und legen Sie dann das Ref-Attribut für die untergeordnete Komponente fest. Der Wert des Ref-Attributs muss mit dem Variablennamen übereinstimmen.

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

Wie im obigen Code gezeigt: Der Ref-Attributwert der ersten Unterkomponente ist sfcRef, und der definierte Variablenname ist ebenfalls sfcRef. In der übergeordneten Komponente können Sie mit sfcRef die demoFun-Methode der untergeordneten Komponente aufrufen.

2.2 TSX (.tsx)-Aufruf

Es ist einfacher, die Referenz der Komponente in .tsx abzurufen. Definieren Sie zunächst eine Ref-Variable und setzen Sie die Variable dann auf das Ref-Attribut der Unterkomponente.

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

Die beiden erzielen den gleichen Effekt:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue3 SFC und TSX zum Aufrufen von Funktionen in Unterkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!