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

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

预览效果