Vue3 SFC 및 TSX를 사용하여 하위 구성 요소의 함수를 호출하는 방법-View.js-php.cn

Vue3 SFC 및 TSX를 사용하여 하위 구성 요소의 함수를 호출하는 방법

王林

풀어 주다： 2023-05-11 14:58:13

앞으로

1491명이 탐색했습니다.

개발 중에는 하위 구성 요소의 참조를 얻고 하위 구성 요소에 정의된 메서드를 호출하는 요구 사항이 있습니다. 양식 구성 요소가 캡슐화되면 상위 구성 요소에서 이 양식 구성 요소의 참조를 호출하고 이 양식 구성 요소의 확인 양식 기능 또는 양식 재설정 기능을 호출해야 합니다. 이 기능을 구현하려면 먼저 상위 구성 요소가 하위 구성 요소에서 호출해야 하는 함수를 노출한 다음 상위 구성 요소로 이동하여 하위 구성 요소의 참조를 얻은 다음 마지막으로 하위 구성 요소의 참조를 통해 하위 구성 요소가 노출한 메서드를 호출합니다. 자식 구성 요소.

1 하위 구성 요소 노출 방법

1.1 SFC(.vue) 노출 방법

.vue를 사용하여 정의된 구성 요소에서 setup에서는 해당 구성 요소의 내부 메서드를 상위 구성 요소에 노출할 수 있는 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 메서드를 사용하여 정의된 구성 요소는 매개 변수 컨텍스트에서 노출() 메서드를 통해 구성 요소 콘텐츠를 노출하는 방법이기도 합니다. .

하위 구성 요소 데모-컴포넌트-tsx.tsx 만들기:

import { defineComponent } from &#39;vue&#39;

export default defineComponent({
  name: &#39;demo-component-tsx&#39;,
  setup (props, context) {
    const demoFun = (str: string) => {
      console.log(&#39;demo component tsx&#39;, 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 &#39;vue&#39;

export default defineComponent({
  name: &#39;demo-component-tsx&#39;,
  setup (props, context) {
    const demoFun = (str: string) => {
      console.log(&#39;demo component tsx&#39;, str)
    }

    // 使用 expose 暴露组件内部的方法
    context.expose({ demoFun })

    return () => (
      <el-button type="primary" onClick={() => demoFun(&#39;child&#39;)}>demo component tsx</el-button>
    )
  }
})

로그인 후 복사

위 코드에서 보듯이 첫 번째 하위 컴포넌트의 ref 속성 값은 sfcRef이고, 정의된 변수 이름도 sfcRef입니다. 상위 구성 요소에서는 sfcRef를 사용하여 하위 구성 요소의 데모Fun 메서드를 호출할 수 있습니다.

2.2 TSX(.tsx) 호출

.tsx에서 구성 요소의 참조를 가져오는 것이 더 쉽습니다. 먼저 ref 변수를 정의한 다음 해당 변수를 하위 구성 요소의 ref 속성으로 설정합니다.

import { defineComponent, ref } from &#39;vue&#39;
import DemoComponentSfc from &#39;@/components/ref/demo-component-sfc.vue&#39;
import DemoComponentTsx from &#39;@/components/ref/demo-component-tsx&#39;

export default defineComponent({
  name: &#39;demo-ref-tsx&#39;,
  setup () {
    const sfcRef = ref()

    const onBtnClick1 = () => {
      if (sfcRef.value) {
        sfcRef.value && sfcRef.value.demoFun(&#39;parent&#39;)
      }
    }

    const tsxRef = ref()

    const onBtnClick2 = () => {
      if (tsxRef.value) {
        tsxRef.value && tsxRef.value.demoFun(&#39;parent&#39;)
      }
    }
    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>
      </>
    )
  }
})

로그인 후 복사

두 가지가 동일한 효과를 얻습니다:

Vue3 SFC 및 TSX를 사용하여 하위 구성 요소의 함수를 호출하는 방법