Comment utiliser Vue3 SFC et TSX pour appeler des fonctions dans des sous-composants

En développement, vous rencontrerez une telle exigence : obtenir la référence d'un sous-composant et appeler la méthode définie dans le sous-composant. Si un composant de formulaire est encapsulé, vous devez appeler la référence de ce composant de formulaire dans le composant parent et appeler la fonction de formulaire de vérification ou la fonction de réinitialisation du formulaire de ce composant de formulaire. Pour implémenter cette fonction, exposez d'abord les fonctions que le composant parent doit appeler dans le composant enfant, puis accédez au composant parent pour obtenir la référence du composant enfant, et enfin appelez la méthode exposée par le composant enfant via la référence de le composant enfant.

1 Méthode d'exposition des sous-composants

1.1 Méthode d'exposition SFC (.vue)

Dans les composants définis à l'aide de .vue, le programme d'installation fournit la méthode finishExpose(), qui peut exposer les méthodes internes du composant au composant parent.

Créer un sous-composant 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 Méthode d'exposition TSX (.tsx)

Les composants définis à l'aide de la méthode .tsx sont également des méthodes pour exposer le contenu du composant via la méthode expose() dans le contexte des paramètres .

Créer le sous-composant 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 Le composant parent appelle la méthode dans le sous-composant

2.1 Appel SFC (.vue)

Récupérer la référence du composant dans le fichier .vue .Définissez d'abord une variable ref, puis définissez l'attribut ref pour le composant enfant. La valeur de l'attribut ref doit être cohérente avec le nom de la variable.

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

Comme indiqué dans le code ci-dessus : la valeur de l'attribut ref du premier sous-composant est sfcRef, et le nom de la variable défini est également sfcRef. Dans le composant parent, vous pouvez utiliser sfcRef pour appeler la méthode demoFun du composant enfant.

2.2 Appel TSX (.tsx)

Il est plus facile d'obtenir la référence du composant dans .tsx. Définissez d'abord une variable ref, puis définissez la variable sur l'attribut ref du sous-composant.

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

Les deux obtiennent le même effet :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!