Vue3 SFC および TSX を使用してサブコンポーネント内の関数を呼び出す方法

開発では、サブコンポーネントの参照を取得し、サブコンポーネントで定義されたメソッドを呼び出すという要件に遭遇することがあります。フォームコンポーネントがカプセル化されている場合、親コンポーネントでこのフォームコンポーネントの参照を呼び出し、このフォームコンポーネントの検証フォーム関数またはリセットフォーム関数を呼び出す必要があります。この関数を実装するには、まず親コンポーネントが子コンポーネントで呼び出す必要がある関数を公開し、次に親コンポーネントに移動して子コンポーネントの参照を取得し、最後に子コンポーネントの参照を通じて子コンポーネントによって公開されたメソッドを呼び出します。子コンポーネント。

1 サブコンポーネントの公開方法

1.1 SFC (.vue) の公開方法

.vue を使用して定義されたコンポーネントでは、defineExpose() メソッドがセットアップで提供されます。コンポーネント内のメソッドを親コンポーネントに追加します。

サブコンポーネントのデモ-コンポーネント-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) 公開メソッド

.tsx メソッドを使用して定義されたコンポーネントも、パラメータ コンテキスト の Expose() メソッドは、コンポーネントのコンテンツを公開します。

サブコンポーネントのデモ-コンポーネント-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 親コンポーネントは、サブコンポーネントのメソッドを呼び出します。

2.1 SFC (.vue) 呼び出し

.vue ファイル内のコンポーネント参照を取得するには、まず ref 変数を定義し、次にサブコンポーネントの ref 属性を設定します。 ref 属性値は変数名と一致している必要があります。

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

上記のコードに示すように、最初のサブコンポーネントの ref 属性値は sfcRef で、定義された変数名も sfcRef です。親コンポーネントでは、sfcRef を使用して子コンポーネントの demoFun メソッドを呼び出すことができます。

2.2 TSX (.tsx) 呼び出し

.tsx でコンポーネントの参照を取得する方が簡単です。最初に ref 変数を定義し、次にその変数をその変数の ref 属性に設定します。サブコンポーネント。

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

この 2 つは同じ効果をもたらします:

以上がVue3 SFC および TSX を使用してサブコンポーネント内の関数を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。