Vue3中怎么使用SFC和TSX调用子组件的函数

这篇文章主要介绍“Vue3中怎么使用SFC和TSX调用子组件的函数”,在日常操作中,相信很多人在Vue3中怎么使用SFC和TSX调用子组件的函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中怎么使用SFC和TSX调用子组件的函数”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器,站群服务器,成都联通服务器托管,海外高防服务器,大带宽服务器,动态拨号VPS,海外云手机,海外云服务器,海外服务器租用托管等。

1 子组件暴露方法

1.1 SFC(.vue)暴露方法

在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件。

创建子组件 demo-component-sfc.vue:




const demoFun = (str: string) => {
  console.log('demo component sfc', str)
}
// 使用 defineExpose 暴露组件内部的方法
defineExpose({ demoFun })
1.2 TSX(.tsx)暴露方法

使用 .tsx 方式定义的组件,也是通过参数 context 中的 expose() 方法暴露组件内容的方法。

创建子组件 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 () => (
       demoFun('child')}>demo component tsx
    )
  }
})

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 () => (
       demoFun('child')}>demo component tsx
    )
  }
})

如上面的代码所示:第一个子组件的 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 () => (
      <>
        
                     parent button         
                              parent button         
           )   } })

两者实现效果一致:

Vue3中怎么使用SFC和TSX调用子组件的函数

到此,关于“Vue3中怎么使用SFC和TSX调用子组件的函数”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章题目:Vue3中怎么使用SFC和TSX调用子组件的函数
标题路径:http://scyanting.com/article/jgcjsh.html

其他资讯