Les méthodes Vue3 SFC et TSX appellent des fonctions dans des sous-composants

En développement, vous rencontrerez une telle exigence : obtenir la référence du sous-composant et appeler la méthode définie dans le sous-composant. Si un composant de formulaire est encapsulé, la référence de ce composant de formulaire doit être appelée dans le composant parent, et la fonction de formulaire de validation ou la fonction de formulaire de réinitialisation de ce composant de formulaire doit être appelée. Pour réaliser cette fonction, exposez d'abord la fonction 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   le composant défini par .vue , la méthode defineExpose()  est fournie dans  le setup  , qui peut exposer la méthode à l'intérieur du composant au composant parent.

Créez le sous-composant  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 暴露组件内部的方法
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 permettant d'exposer le contenu du composant via la méthode expose()  dans  le contexte du paramètre .

Créez 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('child')}>demo component tsx</el-button>
    )
  }
})

2 Le composant parent appelle la méthode dans le composant enfant

2.1 Appel SFC (.vue)

Pour obtenir une référence de composant dans  un 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('child')}>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éfinie 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, de définir d'abord une  variable ref  ,  puis de définir la variable sur l'  attribut ref  du composant enfant.

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

Les deux obtiennent le même effet :

Merci d'avoir lu cet article. Si cet article vous a donné un peu d'aide ou d'inspiration, veuillez le soutenir trois fois, comme, suivre et mettre en signet. L'auteur continuera à partager plus de produits secs avec vous.