Cara menggunakan Vue3 SFC dan TSX untuk memanggil fungsi dalam subkomponen

Dalam pembangunan, anda akan menghadapi keperluan sedemikian: dapatkan rujukan subkomponen dan panggil kaedah yang ditakrifkan dalam subkomponen. Jika komponen borang dikapsulkan, anda perlu memanggil rujukan komponen borang ini dalam komponen induk dan memanggil fungsi borang pengesahan atau menetapkan semula fungsi borang komponen borang ini. Untuk melaksanakan fungsi ini, mula-mula dedahkan fungsi yang komponen induk perlu panggil dalam komponen anak, kemudian pergi ke komponen induk untuk mendapatkan rujukan komponen anak, dan akhirnya panggil kaedah yang didedahkan oleh komponen anak melalui rujukan komponen kanak-kanak.

1 Kaedah pendedahan subkomponen

1.1 Kaedah pendedahan SFC (.vue)

Dalam komponen yang ditakrifkan menggunakan .vue, kaedah defineExpose() disediakan dalam persediaan kaedah di dalam komponen kepada komponen induk.

Buat sub-komponen 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) kaedah pendedahan

Komponen yang ditakrifkan menggunakan kaedah .tsx juga melalui konteks parameter Kaedah expose() dalam mendedahkan kandungan komponen.

Buat subkomponen 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 Komponen induk memanggil kaedah dalam subkomponen

2.1 SFC (.vue) panggil

Untuk mendapatkan rujukan komponen dalam fail .vue, mula-mula takrif pembolehubah ref, dan kemudian tetapkan atribut ref untuk sub-komponen. Nilai atribut ref mestilah konsisten dengan nama pembolehubah.

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

Seperti yang ditunjukkan dalam kod di atas: nilai atribut ref bagi subkomponen pertama ialah sfcRef, dan nama pembolehubah yang ditakrifkan juga ialah sfcRef. Dalam komponen induk, anda boleh menggunakan sfcRef untuk memanggil kaedah demoFun komponen anak.

Panggilan 2.2 TSX (.tsx)

Lebih mudah untuk mendapatkan rujukan komponen dalam .tsx Mula-mula tentukan pembolehubah ref, dan kemudian tetapkan pembolehubah kepada atribut ref subkomponen.

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

Kedua-duanya mencapai kesan yang sama:

Atas ialah kandungan terperinci Cara menggunakan Vue3 SFC dan TSX untuk memanggil fungsi dalam subkomponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!