vue3在jsx或tsx写法中暴露方法给父组件


前言

  在vue3的jsx写法中,我们一般是直接用setup返回jsx或者tsx的,所以我们经常性忽略了有的时候需要一些父调子的操作,例如父组件编辑完毕需要刷新子组件,这个时候总不能直接浏览器刷新吧,所以就直接在父组件对子组件调用它的子方法进行刷新。


实现方式

核心思路就是使用expose去暴露
废话少说,直接先放定义例子

// 子组件,name = Test
async setup(props, { expose }) {
  const getData = () => {
    console.log('我是子组件暴露给父组件的方法')
  }
  // 核心
  expose({ getData })
  return () => (
    <>
      <div>我是子组件</div>
    </>
  )
}

调用方式

调用方式及其简单,就vue3老样子获取实例就行,
但我不知道为啥把这个方法写的那么深,官方文档翻到头秃翻不到解决方案(可能是姿势不对也有可能是真的没写,可能是因为在vue里写jsx比较小众),没办法只能自己找。
在这里插入图片描述
直接就能拿到这个exposed里暴露的方法了,然后调用就行了
mRef.value.$.exposed.getData()

// 这个是父组件
async setup(props) {
  const mRef = ref()
  return () => (
    <>
      // 调用子组件
   	  <Test ref={mRef} />
      <button onClick={() => {
      	// 这样子就掉用好方法了。
		mRef.value.$.exposed.getData()
	   }}>我是父组件</button>
    </>
  )
}

预览效果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐