twofox
V2EX  ›  问与答

Vue3 中, tsx 组件怎么暴露方法提供给父组件调用?

  •  
  •   twofox · Oct 21, 2023 · 650 views
    This topic created in 936 days ago, the information mentioned may be changed or developed.

    例如有一个组件 <DeviceInfoForm ref="formRef"/>

    在父组件可以用过 formRef.value.open(type, id) 调用这个组件的open方法

    子组件 在组合式 API 中是这么写的

    <script setup lang="ts">
    
     //定义一个方法
     const open = () => 
     {
       //忽略
     }
     defineExpose({ open })  //通过这个方法暴露出去
    </script>
    

    但是如果是 tsx/jsx 的方式我要怎么写呢?

    <script lang="tsx">
    export default defineComponent({
      name: 'Form',
      props: {}
      setup(props, { slots, expose, emit }) {
      
      const open = () =>{}
      
      defineExpose({ open })  //这里的写法,父组件似乎无法读取
      
      
      return <></>
      }
    </script>
    
    twofox
        1
    twofox  
    OP
       Oct 21, 2023
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   4638 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 10:06 · PVG 18:06 · LAX 03:06 · JFK 06:06
    ♥ Do have faith in what you're doing.