Métodos Vue3 SFC e TSX chamam funções em subcomponentes

No desenvolvimento, você encontrará tal requisito: obtenha a referência do subcomponente e chame o método definido no subcomponente. Se um componente de formulário for encapsulado, a referência desse componente de formulário precisa ser chamada no componente pai e a função de formulário de validação ou função de formulário de redefinição desse componente de formulário precisa ser chamada. Para conseguir esta função, primeiro exponha a função que o componente pai precisa chamar no componente filho, depois vá até o componente pai para obter a referência do componente filho e, finalmente, chame o método exposto pelo componente filho através da referência de o componente filho.

1 Método de exposição do subcomponente

1.1 Método de exposição SFC (.vue)

No   componente definido por .vue , o método defineExpose()  é fornecido em  setup  , que pode expor o método dentro do componente ao componente pai.

Crie o subcomponente  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étodo de exposição TSX (.tsx)

 Os componentes definidos  usando  o método .tsx também são  métodos para expor o conteúdo do componente por meio do método Expo()  no  parâmetro context .

Criar subcomponente  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 O componente pai chama o método no componente filho

2.1 Chamada SFC (.vue)

Para obter uma referência de componente em  um arquivo .vue  , primeiro defina uma  variável ref  e, em seguida, defina  o atributo ref  para o componente filho. O valor do atributo ref  deve ser consistente com o nome da variável.

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

Conforme mostrado no código acima:  o  valor do atributo  ref do primeiro subcomponente é sfcRef , e o nome da variável definida também é  sfcRef . No componente pai, você pode usar  sfcRef para chamar o método demoFun  do componente filho   .

2.2 chamada TSX (.tsx)

 É mais fácil obter a referência do componente em .tsx, primeiro definir uma  variável ref  e ,  em seguida, definir a variável como o  atributo ref  do componente filho.

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

Ambos alcançam o mesmo efeito:

Obrigado por ler este artigo. Se este artigo lhe deu uma pequena ajuda ou inspiração, apoie-o três vezes, curta, siga e marque como favorito. O autor continuará a compartilhar mais produtos secos com você